/* TITECH v3 · featured.css: owned by WO-07 (see work-orders/PHASE-2.md). */
/* Featured expertise (DESIGN-SPEC §10.1): four tiles on the home page and /solutions/. RUCKUS and Network Security
   are dark, SPC and Cybersecurity are light, so the grid reads as a checkerboard. A dark tile is a local dark context,
   the same way the proof cards are (components.css): it sets the dark --ctx-* values and everything inside follows.
   The whole tile is one link (the secondary link's ::after covers it) and the primary button sits above that. */

:root {
  --ft-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.25 3.25L13 4.75'/%3E%3C/svg%3E");
}

/* Section head: 14em is wide enough for the first sentence, so the title breaks after it at desktop sizes. Legacy balances
   every heading (site.css), which would split the sentences unevenly, so it wraps normally here. */
.featured-section .section-title { max-width: 14em; text-wrap: wrap; }
/* The Arabic title is narrower per sentence, so plain wrapping left "فيه." alone on a line; balancing splits it at the full stop. */
:is([dir="rtl"], html[lang^="ar"]) .featured-section .section-title { text-wrap: balance; }
.featured-section .section-intro { max-width: 60ch; }

/* Grid: 12 columns. RUCKUS 7, SPC 5, Cybersecurity 5, Network Security 7 (the .featured-tile--wide ones). */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.featured-tile { grid-column: span 5; }
.featured-tile--wide { grid-column: span 7; }
@media (max-width: 1000px) {
  .featured-tile, .featured-tile--wide { grid-column: span 6; }
}
@media (max-width: 600px) {
  .featured-grid { grid-template-columns: minmax(0, 1fr); }
  .featured-tile, .featured-tile--wide { grid-column: auto; }
}

/* Tile. Light by default. min-width: 0 lets a long word wrap instead of widening the grid track. */
.featured-tile {
  --ft-pad: clamp(28px, 3vw, 44px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 380px;
  padding: var(--ft-pad);
  border: 1px solid var(--ctx-line);
  border-radius: var(--r-xl);
  background: var(--ctx-surface);
  color: var(--ctx-body);
  /* Hover fades run on --dur-hover; the lift is the individual `translate` so a motion.css reveal (opacity, translate,
     filter while it runs) and the hover never fight over one property. */
  transition: translate var(--dur-base) var(--ease-out), border-color var(--dur-hover) var(--ease-hover),
    box-shadow var(--dur-hover) var(--ease-hover), background-color var(--dur-hover) var(--ease-hover);
}

/* Dark: brand navy with the aurora, a 1px spectrum border (the last background layer, clipped to the border box) and the
   dark context values. The banner colour sits under the border layer so the translucent spectrum reads as light on navy. */
/* WO-22a: the tile is a dark island in a light section, so it carries the dark spectrum tints and the dark
   --ctx-* values itself, and the brandbook's Gradient 3 wash is the first (topmost) of five layers. */
.featured-tile--dark {
  --c-spec-1-rgb: 227 185 192;
  --c-spec-2-rgb: 193 182 195;
  --c-spec-3-rgb: 168 180 196;
  --c-spec-4-rgb: 192 213 195;
  --c-spec-1: rgb(var(--c-spec-1-rgb));
  --c-spec-2: rgb(var(--c-spec-2-rgb));
  --c-spec-3: rgb(var(--c-spec-3-rgb));
  --c-spec-4: rgb(var(--c-spec-4-rgb));
  --g-spectrum: linear-gradient(90deg, rgb(var(--c-spec-1-rgb)) 0%, rgb(var(--c-spec-2-rgb)) 34%, rgb(var(--c-spec-3-rgb)) 67%, rgb(var(--c-spec-4-rgb)) 100%);
  --g-spectrum-soft: linear-gradient(90deg, rgb(var(--c-spec-1-rgb) / .45), rgb(var(--c-spec-2-rgb) / .45), rgb(var(--c-spec-3-rgb) / .45), rgb(var(--c-spec-4-rgb) / .45));
  --ctx-surface: rgb(255 255 255 / .05);
  --ctx-heading: #F4F7FB;
  --ctx-body: #D3DCE8;
  --ctx-muted: #BCC8D5;
  --ctx-line: rgb(255 255 255 / .12);
  --ctx-line-strong: rgb(255 255 255 / .24);
  --ctx-link: var(--c-signal-soft);
  --ctx-tint: rgb(255 255 255 / .05);
  --ctx-focus: var(--c-signal-soft);
  border-color: transparent;
  background-color: var(--c-banner);
  background-image: var(--g-card-wash), var(--bg-banner), var(--g-spectrum-soft);
  background-origin: padding-box, padding-box, padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, border-box;
}

/* The spotlight sits behind the content, above the surface. --mx and --my come from motion.js (data-spotlight);
   without it the light falls at the top centre. */
.featured-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--r-xl) - 1px);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(76 141 255 / .10), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-hover);
}

/* Lit state: the border lights and the glow rises. Hover also lifts 2px; keyboard focus lights the tile without
   moving it, as the WO-02 cards do. On a dark tile the border is the spectrum gradient, so it lights with an inset ring. */
@media (hover: hover) {
  .featured-tile:hover {
    border-color: rgb(76 141 255 / .45);
    box-shadow: var(--shadow-card), var(--glow-soft);
    translate: 0 -2px;
  }
  .featured-tile--dark:hover {
    border-color: transparent;
    box-shadow: var(--glow-soft), inset 0 0 0 1px rgb(76 141 255 / .55);
  }
  .featured-tile:hover::after { opacity: 1; }
}
.featured-tile:focus-within {
  border-color: rgb(76 141 255 / .45);
  box-shadow: var(--shadow-card), var(--glow-soft);
}
.featured-tile--dark:focus-within {
  border-color: transparent;
  box-shadow: var(--glow-soft), inset 0 0 0 1px rgb(76 141 255 / .55);
}
.featured-tile:focus-within::after { opacity: 1; }
/* Keyboard focus on the stretched link also gets the §6 ring on the whole tile, so it shows which tile will open. */
.featured-tile:has(.featured-tile__link:focus-visible) {
  outline: 2px solid var(--ctx-focus, var(--c-signal));
  outline-offset: 3px;
}

/* Content, top to bottom. Margins are reset because the tile spaces its children with gap. */
.featured-tile > * { margin: 0; }
.featured-tile__label {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--ctx-line-strong);
  border-radius: var(--r-pill);
  color: var(--ctx-body);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Logo rows (WO-19b): organised, mono, and never wider than the tile.
   - The brand logo (RUCKUS, SPC) is 26px x its optical scale in the heading colour. It stays on the tile's start edge, the
     axis the label above it and the title below it share; centred between them it read as a misalignment.
   - The partner row (Cybersecurity, Network Security) spans the tile on a hairline and centres its logos in even rows with
     equal gaps, at one optical height (22px x optical scale), muted. It brightens to the heading colour while the tile is
     lit: the tile is one link, so an individual logo never receives the pointer.
   --logo-h and --logo-color are set on the list, because logos.css gives .logo-inline its own defaults. The minimum
   heights keep the tile from jumping while the masks load. */
.featured-tile__logo { min-height: 26px; }
.featured-tile__logos { align-self: stretch; min-height: 22px; padding-block-start: 20px; border-block-start: 1px solid var(--ctx-line); }
.featured-tile__logo .logo-inline { --logo-h: 26px; --logo-color: var(--ctx-heading); }
.featured-tile__logos .logo-inline { --logo-h: 22px; --logo-color: var(--ctx-muted); justify-content: center; gap: 16px 32px; }
@media (hover: hover) {
  .featured-tile:hover .featured-tile__logos .logo-inline { --logo-color: var(--ctx-heading); }
}
.featured-tile:focus-within .featured-tile__logos .logo-inline { --logo-color: var(--ctx-heading); }
.featured-tile__title {
  max-width: 24ch;
  color: var(--ctx-heading);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: wrap;
}
/* Balanced lines only where the tile is wide: in a narrow tile they broke "Wi-Fi" at the hyphen. */
@media (min-width: 1001px) {
  .featured-tile__title { text-wrap: balance; }
}
.featured-tile__body {
  max-width: 54ch;
  color: var(--ctx-body);
  font-size: 1rem;
  line-height: 1.6;
}

/* Capabilities: a signal check mark and 15px text. Two columns on the 7-span tiles, when they are wide enough. */
.featured-caps {
  display: grid;
  gap: 10px 32px;
  width: 100%;
  margin: 0;
  margin-block-start: 0; /* architect: content stays grouped at the top; free height goes above the footer instead */
  padding: 0;
  list-style: none;
}
.featured-caps li {
  position: relative;
  margin: 0;
  padding-inline-start: 26px;
  color: var(--ctx-body);
  font-size: 15px;
  line-height: 1.45;
}
.featured-caps li::before {
  content: "";
  position: absolute;
  inset-block-start: .2em;
  inset-inline-start: 0;
  width: 16px;
  height: 16px;
  background-color: var(--c-signal);
  -webkit-mask: var(--ft-check) center / contain no-repeat;
  mask: var(--ft-check) center / contain no-repeat;
}
@media (min-width: 1001px) {
  .featured-tile--wide .featured-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Footer: the primary button (44px) and the link to the featured page, pinned to the bottom of the tile. */
.featured-tile__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-block-start: 12px;
}
.featured-tile .button:not(.header-cta) {
  position: relative;
  z-index: 1; /* above the tile link's ::after, so the button never triggers it */
  min-height: 44px;
  padding-block: 10px;
}
/* The stretched link. The link stays static so its ::after is placed against the tile. */
.featured-tile__link { position: static; }
.featured-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-xl);
}
/* The whole tile counts as the link, so the underline and the arrow nudge follow the tile too (the button sits above
   the cover, so hovering it would not reach the link). */
.featured-tile:is(:hover, :focus-within) .featured-tile__link { background-size: 100% 1px; }
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
  .featured-tile:is(:hover, :focus-within) .featured-tile__link > span[aria-hidden="true"] { translate: 3px 0; }
  [dir="rtl"] .featured-tile:is(:hover, :focus-within) .featured-tile__link > span[aria-hidden="true"] { translate: -3px 0; }
}

/* Arabic: Plex Mono has no Arabic glyphs, so the label follows the Arabic label rules (§3). Tracking is already zero
   for everything in type.css. */
:is([dir="rtl"], html[lang^="ar"]) .featured-tile__label {
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, Arial, sans-serif;
  font-size: .8125rem;
  line-height: 1.6;
  text-transform: none;
}
:is([dir="rtl"], html[lang^="ar"]) .featured-tile__title { line-height: 1.35; }
:is([dir="rtl"], html[lang^="ar"]) .featured-tile__body { line-height: 1.8; }
:is([dir="rtl"], html[lang^="ar"]) .featured-caps li { line-height: 1.6; }

/* Reduced motion: colour and glow keep fading, movement goes. The legacy site.css cuts every transition to .01ms
   with !important, so the fades are restored the way components.css restores them for the cards. */
@media (prefers-reduced-motion: reduce) {
  .featured-tile, .featured-tile::after {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: var(--dur-hover) !important;
    transition-timing-function: var(--ease-hover) !important;
  }
  .featured-tile:hover,
  .featured-tile:is(:hover, :focus-within) .featured-tile__link > span[aria-hidden="true"],
  [dir="rtl"] .featured-tile:is(:hover, :focus-within) .featured-tile__link > span[aria-hidden="true"] { translate: none; }
}

/* Forced colours drop background colours, which would erase the check masks and the tile edge. */
@media (forced-colors: active) {
  .featured-tile { border-color: CanvasText; }
  .featured-caps li::before { forced-color-adjust: none; background-color: CanvasText; }
}

/* Print: the legacy print rules force white paper, so a dark tile drops back to the light values, as the dark sections do. */
@media print {
  .featured-tile--dark {
    --ctx-surface: inherit;
    --ctx-heading: inherit;
    --ctx-body: inherit;
    --ctx-muted: inherit;
    --ctx-line: inherit;
    --ctx-line-strong: inherit;
    --ctx-link: inherit;
    --ctx-tint: inherit;
    border-color: var(--ctx-line);
    background: none;
  }
  .featured-tile::after { content: none; }
}

/* Architect (WO-07 review): spare height in a row sits above the buttons, so content reads as one block and the
   buttons line up along the bottom of each row. */
.featured-tile__footer { margin-block-start: auto; }