/* Industries (#industries). Prefix: hn-
   "Is it for a business like mine?" Four industries, one photo at a time, then the door left open.

   Wide screens with motion: the stage is held in view by CSS sticky (no GSAP pin) while the page scrolls
   through an empty run of track (.hn-track::after). js/h-industries.js maps that run to the active industry:
   its name comes forward, its line and chip open, the hairline above it fills as you read on, and the frame
   on the other side cross-fades to its photo, which arrives in black and white and warms to full colour.
   The four photos live inside their own list items (one DOM for every layout) and are lifted into the frame
   by absolute positioning against the sticky stage, so nothing between them may be positioned or transformed.

   Phones, tablets, short screens, reduced motion and no JS: four photo cards, each photo warming to colour
   as it scrolls in (colour from the start without motion). */

.hn {
  --hn-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  --hn-r: 24px;
}
.hn-head { max-width: 44rem; }
.hn-lead { max-width: 36rem; }

/* ---------- Cards (default layout) ---------- */
.hn-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px 24px; }
.hn-item { display: grid; align-content: start; gap: 20px; }

.hn-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--hn-r);
  overflow: hidden;
  background: var(--surface-3);
  isolation: isolate;
}
/* A hairline inside the edge so the photo keeps its shape on any background. */
.hn-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 30, .06);
  pointer-events: none;
}
[data-theme="dark"] .hn-photo::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.hn-photo__media { position: absolute; inset: 0; display: block; }
.hn-photo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hn-pos, 50% 50%); }
/* Two copies of one photo (one download): black and white underneath, colour on top. Warming up is the
   colour copy fading in, so only opacity ever animates. */
.hn-photo__bw { filter: grayscale(1) contrast(1.06) brightness(var(--img-dim, 1)); }
.hn-photo__tone { filter: brightness(var(--img-dim, 1)); }
html.js-motion .hn-photo__tone { opacity: 0; transition: opacity 0s linear .8s; }
html.js-motion .hn-item.is-lit .hn-photo__tone { opacity: 1; transition: opacity 1.7s var(--ease-in-out) .35s; }

.hn-copy { display: grid; justify-items: start; }
.hn-bar { display: none; }
.hn-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.875rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
  color: var(--page-ink);
}
:lang(ar) .hn-name { letter-spacing: 0; line-height: 1.3; }
.hn-name__t { display: block; }
.hn-more { display: grid; width: 100%; }
.hn-more__in { display: grid; justify-items: start; min-height: 0; }
.hn-line {
  max-width: 30rem;
  padding-block-start: 8px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--page-ink-2);
  text-wrap: pretty;
}
:lang(ar) .hn-line { line-height: 1.75; }
.hn-nb { white-space: nowrap; }
/* Chip and icon discs sit on --surface, so they keep surface inks: the zone may turn navy while they are still on screen. */
.hn-chip { margin-block-start: 14px; }
.hn-chip__ico { width: 15px; height: 15px; color: var(--z-blue-text); }

/* ---------- The door left open ---------- */
.hn-also {
  display: flex;
  align-items: center;
  gap: 14px 18px;
  margin-block-start: clamp(44px, 5vw, 64px);
  padding-block-start: clamp(24px, 2.6vw, 32px);
  border-block-start: 1px solid var(--border);
}
.hn-also__icons { display: inline-flex; flex: none; padding-inline-start: 3px; }
.hn-also__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--g-600);
  /* The page colour as a ring, so the overlapping discs read as a stack. */
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 4px var(--page-bg);
}
.hn-also__ico + .hn-also__ico { margin-inline-start: -7px; }
.hn-also__ico .ico { width: 19px; height: 19px; }
.hn-also__ico--more { background: var(--z-blue); color: #fff; box-shadow: 0 0 0 4px var(--page-bg); }
.hn-also__ico--more .ico { width: 17px; height: 17px; }
.hn-also__text {
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--page-ink-2);
  text-wrap: pretty;
}
.hn-also__text b { font-weight: 600; color: var(--page-ink); }
:lang(ar) .hn-also__text { letter-spacing: 0; line-height: 1.7; }

/* ---------- Card grid ---------- */
@media (min-width: 600px) {
  .hn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 24px; }
}
@media (min-width: 1024px) {
  /* Reduced motion, no JS or a short screen on desktop: all four, side by side. */
  .hn-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .hn-name { font-size: clamp(1.375rem, 1rem + .7vw, 1.75rem); }
}
@media (max-width: 599px) {
  /* Phones: a landscape crop keeps four cards short; each photo keeps its subject in view. */
  .hn { --hn-r: 20px; }
  .hn-photo { aspect-ratio: 4 / 3; }
  .hn-item[data-hn="restaurants"] { --hn-pos: 50% 56%; }
  .hn-item[data-hn="cafes"] { --hn-pos: 50% 70%; }
  .hn-item[data-hn="retail"] { --hn-pos: 50% 46%; }
  .hn-item[data-hn="franchise"] { --hn-pos: 50% 58%; }
  .hn-item { gap: 16px; }
  .hn-also { align-items: flex-start; flex-direction: column; }
}

/* ---------- Held story (wide screens with motion) ---------- */
@media (min-width: 1024px) and (min-height: 620px) {
  html.js-motion .hn-track::after { content: ""; display: block; height: var(--hn-run, 180vh); }
  html.js-motion .hn-stage {
    --hn-pad: clamp(28px, 5.5vh, 56px);
    --hn-fh: min(calc(100vh - var(--hn-top) - var(--hn-pad) * 2), 780px);
    --hn-fw: min(44%, calc(var(--hn-fh) * .8));
    --hn-gap: clamp(48px, 7vw, 128px);
    position: sticky;
    top: var(--hn-top);
    height: calc(100vh - var(--hn-top));
    max-height: 980px;
    display: flex;
    align-items: center;
  }
  html.js-motion .hn-col { width: calc(100% - var(--hn-fw) - var(--hn-gap)); max-width: 36rem; }

  /* The index: one line per industry; only the active one opens its line and chip. */
  html.js-motion .hn-list { display: block; }
  html.js-motion .hn-item { display: block; }
  html.js-motion .hn-copy { position: relative; display: block; padding-block: 18px 16px; }
  html.js-motion .hn-bar { display: block; position: absolute; top: 0; inset-inline: 0; height: 2px; }
  html.js-motion .hn-bar::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--border-strong); }
  html.js-motion .hn-bar i {
    position: absolute; inset: 0; top: -.5px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s var(--ease-out);
  }
  [dir="rtl"] .hn-bar i { transform-origin: right center; }
  html.js-motion .hn-item.is-on .hn-bar i { transition: none; }

  html.js-motion .hn-name {
    font-size: clamp(1.75rem, .9rem + 1.75vw, 2.625rem);
    color: var(--page-ink-3);
    transition: color .45s var(--ease-out);
  }
  html.js-motion .hn-item.is-on .hn-name { color: var(--page-ink); }

  html.js-motion .hn-more { grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
  html.js-motion .hn-more__in { overflow: hidden; opacity: 0; transition: opacity .25s var(--ease-out); }
  html.js-motion .hn-item.is-on .hn-more { grid-template-rows: 1fr; }
  html.js-motion .hn-item.is-on .hn-more__in { opacity: 1; transition: opacity .45s var(--ease-out) .18s; }
  /* Two lines held for every industry, so the list never shifts when the active one changes. */
  html.js-motion .hn-line { min-height: calc(2lh + 10px); padding-block-start: 10px; }
  html.js-motion .hn-chip { margin-block: 12px 4px; }

  /* The frame: every photo sits on the same spot against the stage's end edge. */
  html.js-motion .hn-photo {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    width: var(--hn-fw);
    height: auto;
    translate: 0 -50%;
    opacity: 0;
    transition: opacity 0s linear .8s;
  }
  /* The incoming photo fades in over the outgoing one, which steps away only once it is covered. */
  html.js-motion .hn-item.is-on .hn-photo { z-index: 2; opacity: 1; transition: opacity .8s var(--ease-out); }
  html.js-motion .hn-photo__media { transform: scale(1.06); transition: transform 0s linear .8s; }
  html.js-motion .hn-item.is-on .hn-photo__media { transform: none; transition: transform 2.2s var(--ease-out); }

  html.js-motion .hn-also { margin-block-start: 0; }

  /* Names become buttons here (js/h-industries.js): a click jumps to that industry. */
  .hn-btn {
    display: block;
    width: 100%;
    padding: 0;
    text-align: start;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) { html.js-motion .hn-item:not(.is-on) .hn-btn:hover { color: var(--page-ink-2); } }
}