/* =========================================================================
   hero.css - (2) HERO, Figma frame 1:4 y 0-994 (header overlaps it).
   One coordinate system for every width:
     --k   = one Figma px (var(--u) on desktop, a larger unit on tablet/mobile)
     x     = calc(50% + (FigmaX - 960) * --k)   -> composition stays centred
     y     = calc(FigmaY * --k)
   At 1920 this lands exactly on the Figma values; at 1440/1280/1024 it is the
   same composition scaled; below 1024 --k is enlarged so the oval stays big.
   ========================================================================= */

#home {
  --k: var(--u);
  /* 1:8 texture = #8C4921 + 25% white noise. Rendered as a darker base plus
     softer noise so both the mean colour and the grain contrast match Figma. */
  --hero-caramel: #93552F;
  --hero-grain: url(../../assets/figma/hero-grain-soft.svg);
  position: relative;
  block-size: calc(994 * var(--k));
  overflow: hidden;
  isolation: isolate;
  background: var(--fg-paper);
  color: var(--fg-paper);
}

/* ---- decorative layer ---------------------------------------------------- */
#home .hero__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* 1:8 - caramel panel: path M0 0 H788.3 L1174 994 H0 Z, noise texture */
#home .hero__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  inline-size: calc(50% + 214 * var(--k));
  background: var(--hero-grain) 0 0 / 256px 256px repeat, var(--hero-caramel);
  clip-path: polygon(0 0, calc(100% - 385.66 * var(--k)) 0, 100% 100%, 0 100%);
}

/* 1:43 / 1:44 - two thin arcs of r 745.5 circles, centres (959,540) / (947,540) */
#home .hero__arc {
  position: absolute;
  top: calc(-205.5 * var(--k));
  inline-size: calc(1491 * var(--k));
  block-size: calc(1491 * var(--k));
  border-radius: 50%;
  border: 1px solid;
}
#home .hero__arc--light {
  left: calc(50% - 746.5 * var(--k));
  border-color: var(--fg-paper);
  clip-path: inset(0 50% 0 0);
}
#home .hero__arc--dark {
  left: calc(50% - 758.5 * var(--k));
  border-color: #652F00;
  clip-path: inset(0 0 0 50%);
}

/* 1:38 - stadium outline ring 488x760 at (715,159) */
#home .hero__ring {
  position: absolute;
  left: calc(50% - 245 * var(--k));
  top: calc(159 * var(--k));
  inline-size: calc(488 * var(--k));
  block-size: calc(760 * var(--k));
  border: max(1px, calc(2 * var(--k))) solid var(--fg-brown);
  border-radius: 999px;
}

/* 1:39 (1184,396) / 1:40 (698,654) - 4-point sparkles, 36px */
#home .hero__sparkle {
  position: absolute;
  inline-size: calc(36.4 * var(--k));
  block-size: calc(36.4 * var(--k));
  background: url(../../assets/icons/sparkle.svg) center / contain no-repeat;
}
#home .hero__sparkle--r { left: calc(50% + 224 * var(--k)); top: calc(396 * var(--k)); }
#home .hero__sparkle--l { left: calc(50% - 262 * var(--k)); top: calc(654 * var(--k)); }

/* ---- 1:29 oval image 427x694 at (747,192) + text -------------------------- */
#home .hero__oval {
  position: absolute;
  z-index: 1;
  left: calc(50% - 213 * var(--k));
  top: calc(192 * var(--k));
  inline-size: calc(427 * var(--k));
  block-size: calc(694 * var(--k));
  border-radius: 999px;
  overflow: hidden;
  background: var(--fg-caramel);
}
#home .hero__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* 1:41 title box top 495 -> 303 inside the oval; 1:42 subtitle top 605 */
#home .hero__text {
  position: absolute;
  inset-inline: 0;
  top: calc(303 * var(--k));
  text-align: center;
  color: var(--fg-paper);
}
#home .hero__title {
  margin: 0;
  font-family: var(--font-heb);
  font-weight: var(--fw-reg);
  font-size: calc(128 * var(--k));
  line-height: 0.66;
  block-size: calc(84 * var(--k));
  letter-spacing: 0;
  color: inherit;
  white-space: nowrap;
}
#home .hero__subtitle {
  margin: calc(26 * var(--k)) auto 0;
  font-family: var(--font-heb);
  font-weight: var(--fw-light);
  font-size: calc(40 * var(--k));
  line-height: 1;
  color: inherit;
}

/* ---- 1:23 social column (76,461), icons 21px, 67.9px pitch ---------------- */
#home .hero__social {
  position: absolute;
  z-index: 2;
  left: calc(50% - 884 * var(--k));
  top: calc(461 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(46.9 * var(--k));
}
#home .hero__social-item {
  position: relative;
  inline-size: calc(21 * var(--k));
  block-size: calc(21 * var(--k));
}
#home .hero__social-item img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
/* 44px tap target around the 21px WhatsApp mark, without moving it */
#home .hero__social-link {
  position: absolute;
  inset: calc(50% - 22px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease);
}
#home .hero__social-link img { inline-size: calc(21 * var(--k)); block-size: calc(21 * var(--k)); }
#home .hero__social-link:hover { transform: scale(1.12); }
#home .hero__social-link:focus-visible { outline: 2px solid var(--fg-paper); outline-offset: -8px; }

/* ---- 1:28 vertical label, Futurism Light 24, ink ------------------------- */
#home .hero__vlabel {
  position: absolute;
  z-index: 1;
  left: calc(50% + 860 * var(--k));
  top: calc(434 * var(--k));
  margin: 0;
  writing-mode: vertical-rl;
  font-family: var(--font-heb);
  font-weight: var(--fw-light);
  font-size: calc(24 * var(--k));
  line-height: 1;
  white-space: nowrap;
  color: var(--fg-ink);
}

/* =========================================================================
   Tablet / mobile - same composition, larger unit; rails simplified.
   ========================================================================= */
@media (max-width: 1023.98px) {
  #home { --k: min(0.74px, calc(100vw * 0.00148)); }
  /* the side rails would fall outside the viewport: pin them to the edges */
  #home .hero__social { left: 24px; gap: 26px; }
  #home .hero__social-item,
  #home .hero__social-link img { inline-size: 20px; block-size: 20px; }
  #home .hero__vlabel { left: auto; right: 18px; font-size: 16px; }
}

@media (max-width: 767.98px) {
  /* no room for the rails next to the oval; WhatsApp stays reachable
     through the floating button */
  #home .hero__social,
  #home .hero__vlabel { display: none; }
}