/* How to find us — Figma 1313:818 (expanded 1990×1531) / 1313:844 (collapsed
   2001×223). Maroon collapsible section; absolute layout at exact Figma coords
   scaled by --px inside a 1990-wide centred frame. Collapsed shows just the
   header band; .is-open reveals the body (clipped by the section's height). */
.htfu {
  position: relative;
  height: calc(233.6 * var(--px));      /* collapsed: 223 + 10.6 (first text 65px) */
  background: #6f1145;
  overflow: hidden;
  transition: height .45s ease;
}
.htfu.is-open { height: calc(1541.6 * var(--px)); }   /* 1531 + 10.6 */
.htfu__frame {
  /* top shifted so the first text sits 65px from the section top (standard). */
  position: absolute; left: 50%; top: calc(10.6 * var(--px)); transform: translateX(-50%);
  width: calc(1990 * var(--px)); height: calc(1531 * var(--px));
}
/* every positioned child reads its Figma x/y from inline vars */
.htfu__frame > *, .htfu__body > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}
/* layout containers override the coord rule */
.htfu__body   { left: 0; top: 0; width: 100%; height: 100%; }
.htfu__toggle { left: 0; top: 0; width: 100%; height: calc(233.6 * var(--px)); background: none; border: 0; cursor: pointer; z-index: 3; }

/* ---- header ---- */
.htfu__title { font-family: var(--font-display); font-weight: 700; font-size: calc(40 * var(--px));    transform: translate(-50%, -50%); white-space: nowrap; color: #fff; }
.htfu__hint  { font-family: var(--font-sans);    font-weight: 400; font-size: calc(22.21 * var(--px)); transform: translate(-50%, -50%); white-space: nowrap; color: #fff; }
.htfu__tri   { transform: translate(-50%, -50%); width: 0; height: 0; }
.htfu__tri--down { border-left: calc(9 * var(--px)) solid transparent; border-right: calc(9 * var(--px)) solid transparent; border-top: calc(12 * var(--px)) solid #fff; }
.htfu__tri--up   { position: static; display: inline-block; width: 0; height: 0; margin-left: calc(9 * var(--px)); vertical-align: middle; transform: none; border-left: calc(9 * var(--px)) solid transparent; border-right: calc(9 * var(--px)) solid transparent; border-bottom: calc(12 * var(--px)) solid #fff; }

/* ---- body reveal ---- */
.htfu__body { opacity: 0; visibility: hidden; }
.htfu.is-open .htfu__body { opacity: 1; visibility: visible; transition: opacity .3s ease .15s; }

/* ---- venue text ---- */
.htfu__venue { font-family: var(--font-display); font-weight: 700; font-size: calc(45 * var(--px)); transform: translate(-50%, -50%); white-space: nowrap; color: #fff; }
.htfu__addr  { font-family: var(--font-display); font-weight: 400; font-size: calc(32.225 * var(--px)); white-space: nowrap; color: #fff; }
.htfu__addr--l { transform: translateY(-50%) scaleX(.85); transform-origin: left center; }   /* Soho: left edge at x, condensed to Domaine width */
.htfu__addr--c { transform: translate(-50%, -50%) scaleX(.85); transform-origin: center; }    /* Mayfair: centred, condensed */
.htfu__rule  { height: 1px; width: calc(var(--w) * var(--px)); background: rgba(255,255,255,.85); }

/* ---- directions ---- */
.htfu__info { font-family: var(--font-sans); font-weight: 400; font-size: calc(22.21 * var(--px)); color: #fff; line-height: 1.4; white-space: nowrap; }
.htfu__info p { margin: 0; }
.htfu__info ul { margin: 0; padding-left: calc(34 * var(--px)); list-style: disc; }
.htfu__info li::marker { font-size: .8em; }
.htfu__info .htfu__gap { margin-top: calc(20 * var(--px)); }

/* ---- maps + circles + arrows ---- */
.htfu__map  { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); border: 1px solid #fff; object-fit: cover; }
.htfu__circ { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); border: calc(2 * var(--px)) solid #fff; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: 0 calc(2 * var(--px)) calc(8 * var(--px)) rgba(0,0,0,.35); }
/* url() resolves against the STYLESHEET, not the web root — so these need the
   ../../../ hop out of pages/landing/css/ (same as testimonials.css). */
.htfu__mmap { background-image: url('../../../assets/img/htfu-mayfair-map.webp'); background-size: calc(var(--bw) * var(--px)) auto; background-position: calc(var(--bx) * var(--px)) calc(var(--by) * var(--px)); }
.htfu__smap { background-image: url('../../../assets/img/htfu-soho-map.webp');    background-size: calc(var(--bw) * var(--px)) auto; background-position: calc(var(--bx) * var(--px)) calc(var(--by) * var(--px)); }
/* arrows positioned by CENTRE (--x/--y) at their natural size, then rotated */
.htfu__arrow { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); transform: translate(-50%, -50%) rotate(var(--r, 0deg)); }

/* ---- hide button ---- */
.htfu__hide { transform: translate(-50%, -50%); background: none; border: 0; color: #fff; cursor: pointer; font-family: var(--font-sans); font-size: calc(22.21 * var(--px)); white-space: nowrap; display: inline-flex; align-items: center; }

/* ---- Mobile: this section scales off the desktop --px model, so the collapsed
   header renders tiny on phones (title ≈12px, hint ≈7px). Enlarge just the
   header text + toggle triangle for legibility — positions/structure unchanged. */
@media (max-width: 600px) {
  .htfu__title     { font-size: calc(74 * var(--px)); }
  .htfu__hint      { font-size: calc(42 * var(--px)); }
  /* The enlarged hint is wider than on desktop and runs over the fixed-position
     triangle, so on mobile replace it with an inline arrow that always follows
     the text (sized in em, so it tracks the hint font). */
  .htfu__tri--down { display: none; }
  .htfu__hint::after {
    content: ""; display: inline-block; margin-left: .5em; vertical-align: middle;
    border-left: .34em solid transparent; border-right: .34em solid transparent;
    border-top: .42em solid #fff;
  }

  /* The Mayfair map sits at the right of the 1990-wide frame, which overflows the
     phone viewport — nudge the whole map cluster (+ directions text) left so the
     map fits. margin-left shifts them without disturbing their own transforms. */
  .htfu__mgrp     { margin-left: calc(-150 * var(--px)); }
  /* larger directions text for legibility on phones */
  .htfu__info     { font-size: calc(30 * var(--px)); }
  /* Mayfair directions sit to the LEFT of the map: right-align them and pin the
     right edge just left of the map, so the text runs parallel to the picture
     (mirrors the Soho side, where the text hugs its map) instead of overlapping. */
  .htfu__info--m      { left: auto; right: calc(1007 * var(--px)); width: calc(680 * var(--px)); text-align: right; }
  .htfu__info--m ul   { padding-left: 0; list-style-position: inside; }
  /* Stack the Mayfair title on its own line just above the address (the desktop
     row is too cramped on a phone), aligned over the address centre. */
  .htfu__venue--m { left: calc(676 * var(--px)); top: calc(838 * var(--px)); }
}