/* ═══════════════════════════════════════════════════════════════════════
   css/base/home_hero.css — shared homepage HERO (master + every entity)
   Daralbeida Multi-Entity Platform · 2026-06-13

   ONE source of truth for the homepage hero: the tile FACES + base grids come
   from home_tiles.css; this sheet adds the hero chrome, the LIBRARY / PLATFORM
   group panels, ROUND (circular) tiles with button-style hover, and the
   legibility / balance pass (readable title + subhead, larger tile labels,
   framed groups that soften the dark-tile-on-light-page contrast).

   Keyed on .home-hero so master + all six entity homepages share it. The DARX
   consumer homepage is a different design and never loads this file. All
   colours resolve from the entity skin tokens, so it renders per-entity.
   ═══════════════════════════════════════════════════════════════════════ */

main.home-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 4px 24px 64px;   /* heading lifted ~30px */
  /* DEEP entity background — matches the document library / section portals.
     A faint top glow lifts the hero; base is the same --nav-bg derivation. */
  background:
    radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--nav-gold) 10%, transparent), transparent 60%),
    var(--page-bg);
}

/* CONTAINMENT (2026-06-16, user) — the page frame is the viewport; NOTHING in
   the hero may bleed past it. main.home-hero is a centred flexbox, so each child
   sizes to its CONTENT (max-content) and a wide block — chiefly the vw-scaled
   wordmark — could grow wider than the screen and spill off both edges (clipped
   into the margin). Cap every hero block to the content box. min-width:0 lets
   inner grids/text actually shrink rather than force overflow. SHARED: lives in
   the one hero file, so every entity + master homepage inherits the guard. */
main.home-hero { width: 100%; max-width: 100%; }
main.home-hero > * { max-width: 100%; min-width: 0; }

/* TITLE — readable: darkened brand instead of the faint mid-tone. */
.home-hero h1 {
  font-family: var(--font-display);          /* Cinzel Decorative (token) */
  font-size: var(--ui-fs-display);
  letter-spacing: 0.06em;
  text-transform: capitalize; margin: 0 0 10px;   /* propercase */
  color: color-mix(in srgb, var(--nav-gold) 38%, #fff);
  overflow-wrap: break-word;
}
.home-hero p.sub {
  font-family: var(--font-mono); font-size: var(--ui-fs-value); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--nav-gold, #C9BBA0); margin: 0 0 14px;
}
.home-hero p.lede {
  max-width: 540px; font-family: var(--font-body); font-size: var(--lede-size, var(--ui-fs-value));
  line-height: 1.55; color: var(--lede-color, var(--nav-text-hover, rgba(246,241,231,.85))); margin: 0;
}

/* GROUP PANEL — frames each group on a warm mid surface so the dark tiles no
   longer clash straight against the light page; gold hairline edge, very round. */
.home-hero .tile-group {
  width: fit-content; max-width: 100%;
  margin: 22px auto 0; padding: 13px 24px 18px;
  background: color-mix(in srgb, var(--nav-bg) 26%, var(--surface-color));
  border: 1.5px solid color-mix(in srgb, var(--nav-gold) 50%, transparent);
  border-radius: 32px;
}
.home-hero .tile-group:first-of-type { margin-top: 16px; }   /* raised up (2026-06-13) */

/* GROUP CAPTION — readable label (no longer micro-text). */
.home-hero .tile-cap {
  width: 100%; text-align: center; margin: 0 0 9px;
  font-family: var(--font-mono); font-size: var(--ui-fs-value); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-accent) 55%, #000);
}

/* Tile rows inside a panel: caption supplies spacing; tighten the grid. */
.home-hero .tool-row { margin-top: 0; gap: 14px; }
.home-hero .lib-row { grid-template-columns: repeat(2, 83px); }
.home-hero .sys-row { grid-template-columns: repeat(3, 83px); }   /* 6 tiles → 2 rows of 3 (2026-06-15, user) */
/* PLATFORM CONTROLS · one-row variant (master cockpit only — NOT 14/home.php's
   3-up): all 6 tiles in ONE row, faces ~10% smaller (73→66px / cell 83→76px),
   and no hover top-highlight line. (2026-06-17, user) */
.home-hero .is-onerow { grid-template-columns: repeat(6, 76px); }
.home-hero .is-onerow .ptile { width: 66px; height: 66px; }
.home-hero .is-onerow .ptile-tool::after { display: none; }

/* ROUND EVERYTHING — tiles become circles (face + gold backing ring), as little
   straight line as possible. Labels sized to sit inside the circle. */
.home-hero .ptile,
.home-hero .ptile::before { border-radius: calc(var(--tile-round, 100) * 0.5%); }   /* skin "Tile shape" slider: 0=square · 100=round (50%). 2026-06-24 user */
.home-hero .ptile-name { font-size: var(--ui-fs-value); letter-spacing: 0.03em; }

/* Keep the icon + label above the animated sheen layer below. */
.home-hero .ptile-ico, .home-hero .ptile-name { position: relative; z-index: 2; }

/* ANIMATED BACKGROUND SHEEN (2026-06-13, user) — repurposes ::after (which used
   to be the stray gold top-bar). A diagonal highlight sweeps across the circular
   face WHILE hovering; clipped to the circle by its own border-radius, and it
   sits above the face but below the icon/label. */
.home-hero .ptile-tool::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(110deg, transparent 34%,
    rgba(255, 255, 255, 0.18) 50%, transparent 66%);
  background-size: 220% 100%; background-position: 180% 0;
}
.home-hero .ptile:hover::after {
  opacity: 1; animation: ptile-sheen 1.15s ease-in-out infinite;
}
@keyframes ptile-sheen {
  from { background-position: 180% 0; }
  to   { background-position: -90% 0; }
}
/* Platform tiles — a richer GOLD sheen for extra drama. */
.home-hero .is-platform .ptile-tool::after {
  background: linear-gradient(110deg, transparent 30%,
    color-mix(in srgb, var(--nav-gold) 50%, transparent) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 180% 0;
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .ptile:hover::after { animation: none; }
}

/* Hover — clearly visible on BOTH the light Library panel and the dark Platform
   panel: a springy lift + GROW + solid gold ring + icon scale (the lift/grow/
   solid ring read on any background, unlike a soft glow that washes out on
   light). 2026-06-13, user: Library tiles previously showed no visible effect. */
.home-hero .ptile {
  transition: transform .16s cubic-bezier(.34, 1.4, .5, 1), box-shadow .2s ease,
              border-color .16s ease, background .16s ease;
}
.home-hero .ptile-ico { transition: transform .16s ease, color .16s ease; }
.home-hero .ptile:hover {
  border-color: var(--nav-gold, #C9BBA0);
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(246, 241, 231, 0.25),
    0 0 0 2px var(--nav-gold, #C9BBA0),                                                       /* solid accent ring = Nav accent (by design) */
    0 0 18px -2px color-mix(in srgb, var(--glow-color, var(--nav-gold, #C9BBA0)) 70%, transparent),  /* soft GLOW halo follows --glow-color. 2026-06-24 user */
    0 6px 14px rgba(0, 0, 0, 0.4);
}
.home-hero .ptile:hover .ptile-ico { transform: scale(1.12); }
.home-hero .ptile:active { transform: translateY(-1px) scale(1.02); }

/* PLATFORM CONTROLS (DARMASTER only) — dramatic: a deep panel with a glowing
   gold edge, set apart from the calm light LIBRARY panel; tiles pop on a
   brighter ring. Entity homepages carry only the LIBRARY group, so this is
   inert there. */
.home-hero .tile-group.is-platform {
  /* Skin "Bands & Tiles": panel derives from --tile-color (darker than the tiles)
     with the gold halo from --glow-color × --glow-strength, all emboss scaled. */
  --_tile: var(--tile-color, var(--nav-bg, #16232F));
  --_es:   var(--emboss-strength, 100);
  --_gc:   var(--glow-color, var(--nav-gold, #C9BBA0));
  --_gs:   var(--glow-strength, 100);
  background: linear-gradient(168deg,
    color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.2%)) 0%,
    color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.64%)) 100%);
  border: 1.5px solid color-mix(in srgb, var(--_gc) 80%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.26%)),
    0 0 28px -6px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.45%)),
    0 16px 36px -12px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 color-mix(in srgb, transparent, #fff calc(var(--_es) * 0.14%));
}
.home-hero .tile-group.is-platform .tile-cap {
  color: var(--nav-gold-light, #e0d4b5); letter-spacing: 0.24em;
}
.home-hero .is-platform .ptile::before {
  background: color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.52%));
  /* This ::before sits at z-index:-1, BEHIND the panel background, so any glow on
     it is hidden — the visible tile glow lives on the .ptile itself (below). */
  box-shadow:
    0 0 9px 2px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.55%)),
    0 6px 16px -5px rgba(0, 0, 0, 0.6);
}

/* RESTING (mouse NOT over): 1px nav-accent border + a --nav-gold GLOW on the tile
   itself. The glow must live on .ptile (not its ::before, which is hidden behind
   the panel bg) to be visible. :hover flips the border to #000 + inner/feather. */
.home-hero .is-platform .ptile {
  /* Fully skin-driven: border + glow from --glow-color × --glow-strength. */
  border-color: var(--_gc);
  box-shadow: 0 0 19px 2px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.60%));
}

/* PLATFORM tiles — hover = INNER nav-accent border (user): a gold ring inset a
   few px from the tile edge frames the face, reading as pushed-in. No pop, no
   movement, no bg change. The first inset ring (tile-face colour) holds the gap;
   the second is the --nav-gold inner border. */
.home-hero .is-platform .ptile:hover {
  transform: none;
  border-color: var(--_gc);                  /* accent border on hover */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.36%)) 0%, var(--_tile) 100%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--_tile), #000 calc(var(--_es) * 0.4%)),       /* 1px gap from edge */
    inset 0 0 0 3px var(--_gc),                                                            /* gold inner border */
    inset 0 0 14px 4px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.65%)),  /* feather glow */
    inset 0 0 34px 14px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.42%)), /* heavy feather */
    0 0 19px 2px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.60%));        /* outer glow */
}
.home-hero .is-platform .ptile:hover .ptile-ico {
  transform: none;
  color: var(--nav-gold-light, #e0d4b5);
}
.home-hero .is-platform .ptile:hover::before {
  box-shadow:
    0 0 18px 5px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.82%)),
    0 8px 22px -5px rgba(0, 0, 0, 0.7);
}

/* ENTITY THUMBNAIL ROWS (DARMASTER platform-controls only, 2026-06-13 user) —
   two rows of four mini live-preview tiles below the platform tools. Entity
   homepages have no .ent-thumbs markup, so this is inert there. */
.home-hero .ent-thumbs {
  display: grid; grid-template-columns: repeat(4, 104px); gap: 12px;
  justify-content: center; width: 100%; margin-top: 18px;
}
.home-hero .ent-thumb {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-decoration: none; border-radius: 10px; padding: 5px 5px 7px;
  background: color-mix(in srgb, var(--nav-bg) 78%, #000);
  border: 1px solid color-mix(in srgb, var(--nav-gold) 32%, transparent);
  transition: transform .14s ease, border-color .16s ease, box-shadow .18s ease;
}
.home-hero .ent-thumb:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ent-brand, var(--nav-gold)) 75%, #fff);
  box-shadow:
    0 0 0 1px var(--ent-brand, var(--nav-gold)),
    0 0 16px -3px color-mix(in srgb, var(--ent-brand, var(--nav-gold)) 70%, transparent),
    0 6px 14px rgba(0, 0, 0, 0.45);
}
/* "You are here" — the current (DARMASTER) tile gets a steady gold ring. */
.home-hero .ent-thumb.is-current {
  border-color: color-mix(in srgb, var(--nav-gold) 70%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nav-gold) 55%, transparent),
              0 0 16px -4px color-mix(in srgb, var(--nav-gold) 60%, transparent);
}
.home-hero .ent-thumb-frame {
  position: relative; width: 94px; height: 60px; overflow: hidden;
  border-radius: 6px; background: #fff;
  border: 1px solid color-mix(in srgb, var(--nav-gold) 28%, transparent);
}
.home-hero .ent-thumb-frame iframe {
  position: absolute; top: 0; left: 0; width: 1300px; height: 830px; border: 0;
  transform: scale(0.0723); transform-origin: top left; pointer-events: none;
  transition: transform .2s ease;
}
.home-hero .ent-thumb:hover .ent-thumb-frame iframe { transform: scale(0.078); }   /* subtle preview zoom */
.home-hero .ent-thumb.is-master .ent-thumb-frame {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--nav-gold) 32%, var(--nav-bg)), var(--nav-bg));
  color: var(--nav-gold-light, #e0d4b5);
}
/* Brand-colour accent bar under each preview — identifies the entity at a glance. */
.home-hero .ent-thumb-frame::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--ent-brand, var(--nav-gold)); z-index: 3;
}
/* Live doc-count chip, top-right of the preview. */
.home-hero .ent-thumb-count {
  position: absolute; top: 3px; right: 3px; z-index: 4;
  font-family: var(--font-mono, monospace); font-size: var(--ui-fs-micro); font-weight: 700; line-height: 1;
  padding: 2px 4px; border-radius: 999px;
  color: var(--nav-gold-light, #e0d4b5); background: rgba(0, 0, 0, 0.62);
  border: 1px solid color-mix(in srgb, var(--nav-gold) 50%, transparent);
}
/* Hover overlay — full legal name + "Open ↗" affordance. */
.home-hero .ent-thumb-over {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 5px 6px; opacity: 0; transition: opacity .16s ease;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2) 55%, transparent);
}
.home-hero .ent-thumb:hover .ent-thumb-over { opacity: 1; }
.home-hero .ent-thumb-name {
  font-family: var(--font-body, serif); font-size: var(--ui-fs-label); line-height: 1.2;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.home-hero .ent-thumb-open {
  font-family: var(--font-mono, monospace); font-size: var(--ui-fs-micro); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-gold-light, #e0d4b5);
}
.home-hero .ent-thumb-open i { font-style: normal; }
/* "You are here" badge on the current (DARMASTER) tile. */
.home-hero .ent-thumb-here {
  position: absolute; top: 3px; left: 3px; z-index: 6;
  font-family: var(--font-mono, monospace); font-size: var(--ui-fs-micro); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  padding: 2px 4px; border-radius: 3px; color: #1c1205;
  background: var(--nav-gold, #C9BBA0);
}
.home-hero .ent-thumb-label {
  font-family: var(--font-mono, monospace); font-size: var(--ui-fs-label); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nav-text-hover, #f1e9d8);
}

/* PLATFORM STATS strip — live totals below the cockpit (DARMASTER only;
   entity homepages have no .platform-stats markup, so it is inert there). */
.home-hero .platform-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin-top: 32px;
}
.home-hero .pstat { display: flex; flex-direction: column; align-items: center; min-width: 84px; }
.home-hero .pstat-num {
  font-family: var(--font-display, serif); font-size: var(--ui-fs-display); line-height: 1;
  color: color-mix(in srgb, var(--nav-gold) 38%, #fff);   /* light on deep bg */
}
.home-hero .pstat-lbl {
  margin-top: 5px; font-family: var(--font-mono, monospace); font-size: var(--ui-fs-label);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nav-gold, #C9BBA0);
}
/* "is-mini" totals — VERY small, BOLD, crisp; sit right under the End-users
   homepages title (2026-06-15, user). num + label inline, tight. */
.home-hero .platform-stats.is-mini { gap: 2px 16px; margin: 1px 0 14px; }
.home-hero .platform-stats.is-mini .pstat { flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; }
.home-hero .platform-stats.is-mini .pstat-num {
  font-family: var(--font-mono, monospace); font-size: var(--ui-fs-title); line-height: 1; font-weight: 800;
  letter-spacing: 0; color: color-mix(in srgb, var(--nav-gold) 58%, #fff);
}
.home-hero .platform-stats.is-mini .pstat-lbl {
  margin-top: 0; font-size: var(--ui-fs-micro); font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--nav-gold, #C9BBA0);
}
@media (max-width: 460px) {
  .home-hero .ent-thumbs { grid-template-columns: repeat(2, 104px); }
}

@media (max-width: 460px) {
  .home-hero .sys-row { grid-template-columns: repeat(2, 83px); }
  .home-hero .is-onerow { grid-template-columns: repeat(3, 76px); }   /* phones: 2 rows of 3 */
}

/* ── PLATFORM ENTRANCE ──────────────────────────────────────────────────────
   The stripped, centred-console layout shared by the portal entrance
   (darp1.php) and the security hub (14/home.php). ONE source — pages opt in
   with body.is-entrance + main.home-hero.portal-entrance, then drop their hero
   text. Pure layout; all colour/size still comes from the skin + the ladder. */
body.is-entrance .darx-nav-tabs { display: none !important; }   /* wordmark + auth only */
main.portal-entrance { min-height: calc(100vh - 60px); justify-content: flex-start; padding: 50px 16px 24px; }
main.portal-entrance > .tile-group:first-of-type { margin: 0; }   /* beats the 16px first-of-type margin */
main.portal-entrance .sys-row { grid-template-columns: repeat(3, 112px); gap: 18px; }
main.portal-entrance .ptile-tool { width: 102px; height: 102px; }
main.portal-entrance .ptile-ico { height: 28px; }
main.portal-entrance .ptile-ico svg { width: 28px; height: 28px; }
main.portal-entrance .ptile-name { font-size: var(--ui-fs-title); }
main.portal-entrance .ptile-tool::after { display: none !important; }   /* drop the gold top-bar line on hover */
main.portal-entrance .is-platform .ptile:hover {
  /* GLOW + ring follow --glow-color × --glow-strength (ONE source — identical to
     the canonical .is-platform hover above); was hardcoded to raw --nav-gold so the
     glow ignored the "Glow colour"/"Glow strength" controls. 2026-06-24 user */
  box-shadow:
    inset 0 0 0 3px var(--_gc),
    inset 0 0 14px 4px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.65%)),
    inset 0 0 34px 14px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.42%)),
    0 0 19px 2px color-mix(in srgb, transparent, var(--_gc) calc(var(--_gs) * 0.60%));
}
@media (max-width: 460px) {
  main.portal-entrance .sys-row { grid-template-columns: repeat(2, 102px); }
}