/* =========================================================================
   COMPONENTS — canonical, token-referencing. One CTA, one nav, one footer.
   ========================================================================= */

/* --- CTA (the one button) — solid / outline / text. Label rolls on hover (M6). */
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: var(--cta-h); padding-inline: var(--cta-pad-x); border-radius: var(--cta-radius);
  font-family: var(--cta-font); font-size: var(--cta-size); font-weight: var(--cta-weight);
  letter-spacing: var(--track-cta); text-transform: uppercase; line-height: 1; white-space: nowrap;
  background: var(--accent); color: var(--ink-2); border: 1px solid var(--accent); overflow: hidden;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.cta__label { display: block; position: relative; overflow: hidden; }
.cta__label > span { display: block; transition: transform var(--dur) var(--ease-out); }
.cta__label::after { content: attr(data-label); display: block; position: absolute; left: 0; top: 100%; width: 100%; text-align: center; transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) { .cta:hover .cta__label > span, .cta:hover .cta__label::after, .cta:focus-visible .cta__label > span, .cta:focus-visible .cta__label::after { transform: translateY(-100%); } }
.cta--outline { background: transparent; color: var(--accent); height: var(--cta-h-sm); }
.cta--ink { background: transparent; border: 1px solid var(--ink-2); color: var(--ink-2); }   /* on the accent card (Alex 16 Sep) */
.cta--ink:hover { background: var(--ink-2); color: var(--accent); }
.cta--text {
  height: auto; padding: 12px 0; margin: -12px 0;   /* 44px hit area, same visual size */ border: 0; border-radius: 0; background: none; color: var(--accent);
  font-size: var(--type-nav); font-weight: 600; letter-spacing: var(--track-cta);
}
/* Chiara 16 Sep: no underline on the nav CTA — it rolls like every other CTA, using .cta__label above */

/* --- NAV — frosted pill, sticky (M9) ------------------------------------ */
.nav { position: fixed; top: var(--nav-top); left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav__pill {
  pointer-events: auto; position: relative; display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding-inline: var(--space-lg); border-radius: var(--radius-pill);
  background: var(--nav-glass); -webkit-backdrop-filter: blur(var(--nav-blur)); backdrop-filter: blur(var(--nav-blur));
}
.nav__logo { display: flex; align-items: center; min-height: 44px; }
.nav__logo img { width: clamp(48px, 3.5417vw, 68px); }
.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.0833vw, 40px); position: absolute; left: 50%; transform: translateX(-50%); }
.nav__links a { white-space: nowrap; font-size: var(--type-nav); font-weight: 500; letter-spacing: var(--track-nav); text-transform: uppercase; color: var(--paper); transition: color var(--dur) var(--ease-out); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--accent); }
.nav__right { display: flex; align-items: center; gap: var(--space-md); }
.nav__icon { width: clamp(28px, 1.9271vw, 37px); }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.nav__toggle span { display: block; width: 29px; height: 2px; background: var(--line); }

/* --- MOBILE MENU OVERLAY (house pattern) -------------------------------- */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); padding-bottom: 12svh;   /* links sit a touch above centre (Chiara 15 Sep) */
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out); }
.menu[data-open="true"] { opacity: 1; visibility: visible; }
.menu a:not(.cta) { font-family: var(--font-display); font-size: var(--type-h3); }
.menu .cta { margin-top: var(--space-lg); }
.menu__close { position: absolute; top: calc(var(--nav-top) + (var(--nav-h) - 44px) / 2); right: calc(var(--gutter) + var(--space-lg)); width: 44px; height: 44px; padding: 0; border: 0; background: none; }   /* the X is the burger's own two lines, crossed, in the burger's exact box (Chiara 5 Oct) */
.menu__close span { position: absolute; left: 50%; top: 50%; width: 29px; height: 2px; margin: -1px 0 0 -14.5px; background: var(--line); transition: transform var(--dur) var(--ease-out); }
.menu__close span:first-child { transform: rotate(45deg); }
.menu__close span:last-child { transform: rotate(-45deg); }
@media (max-width: 640px) { .menu__close { width: 29px; } .menu__close::before { content: ''; position: absolute; inset: -6px -12px; } }   /* phones: same 29px box as the burger, so the X lands on the lines; tap target kept at 44px+ */
.menu__mark { position: absolute; bottom: var(--space-xl); width: 48px; opacity: .6; }
body.menu-open { overflow: hidden; }

/* --- FOOTER (3141:*) — Explore spans the full height on the left; social + contact sit above the brand row on
   the right, split by a hairline. Offsets from the Figma frame (7498→8281 = 783 tall at 1920). ---------------- */
.footer { background: var(--bg); padding-top: clamp(48px, 4.4792vw, 86px); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; border-bottom: 1px solid var(--line-dark); }
.footer__col { padding-block: 0 var(--space-2xl); }
.footer__col--explore { grid-row: 1 / 3; border-right: 1px solid var(--line-dark); padding-right: var(--space-lg); padding-bottom: var(--space-lg); }
.footer__col--social, .footer__col--contact { padding-left: var(--space-2xl); }
.footer__head { font-size: var(--type-meta); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--white-50); margin-bottom: var(--space-sm); }
.footer__nav a { display: block; font-family: var(--font-display); font-size: var(--type-lead); line-height: 1.45; padding-block: 4px; transition: color var(--dur) var(--ease-out); }
.footer__nav a:hover { color: var(--accent); }
.footer__list a { display: block; font-size: var(--type-meta); font-weight: 500; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 2; padding-block: 6px;   /* Chiara 15 Sep: smaller */ transition: color var(--dur) var(--ease-out); }
.footer__list a:hover { color: var(--accent); }
.footer__listen { margin-top: var(--space-lg); }
.footer__brand { grid-column: 2 / -1; grid-row: 2; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; padding: var(--space-2xl) 0 var(--space-2xl) var(--space-2xl); border-top: 1px solid var(--line-dark); }   /* logo + tagline centred between the two rules, equal space above and below (Chiara 15 Sep) */
.footer__brand img { width: clamp(110px, 7.9688vw, 153px); }
.footer__brand p { font-family: var(--font-display); font-size: var(--type-lead); line-height: var(--lh-lead); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm) var(--space-lg); padding-block: clamp(24px, 1.9271vw, 37px) var(--space-xl); font-size: var(--type-meta); }
.footer__legal a { font-weight: 600; letter-spacing: var(--track-nav); text-transform: uppercase; }
.footer__legal-links { display: flex; gap: var(--space-lg); }
.footer__legal a { display: inline-block; padding-block: var(--space-xxs); }   /* credit + legal links: 18px text → ≥24px tap target on phones (22 Sep mobile pass) */
.footer__legal-links a { font-weight: 500; }
.footer__copy { color: var(--white-50); margin-left: auto; }

/* --- responsive: layout flips only ------------------------------------- */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-rows: auto auto auto; }
  .footer__col--explore { grid-column: 1 / -1; grid-row: 1; border-right: 0; padding-right: 0; padding-top: 0; padding-bottom: var(--space-lg); margin-bottom: var(--space-lg); border-bottom: 1px solid var(--line-dark); }
  .footer__brand { grid-row: 3; }
  .footer__col--social, .footer__col--contact { padding-left: 0; }
  .footer__col--contact { padding-left: var(--space-lg); }
  .footer__brand { grid-column: 1 / -1; padding-left: 0; }
}
@media (max-width: 640px) {
  .nav__right .cta--text { display: none; }
  .nav__right { gap: var(--space-sm); }                                                    /* phones: circle sits closer to the burger (Chiara 23 Sep) */
  .nav__toggle { position: relative; width: 29px; }                                        /* box matches the lines, so the burger ends the same 28px from the pill edge as the logo does on the left */
  .nav__toggle::before { content: ''; position: absolute; inset: -6px -12px; }             /* keeps the tap target at 44px+ */
  .footer__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .footer__col--explore, .footer__col--social, .footer__col--contact, .footer__brand { grid-row: auto; grid-column: 1; }
  .footer__col--contact { padding-left: 0; }
  .footer__brand { grid-template-columns: 1fr; gap: var(--space-md); order: -1; border-top: 0; border-bottom: 1px solid var(--line-dark); padding-top: var(--space-lg); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); }   /* phones: wordmark + tagline lead the footer */
  .footer__head { font-size: var(--type-nav); }
  .footer__brand img { width: 84px; }                                                     /* phones: everything a size down (Chiara 15 Sep) */
  .footer__brand p, .footer__nav a { font-size: var(--type-sub); }
  .footer__nav a { padding-block: 2px; }
  .footer__list a { font-size: var(--type-nav); padding-block: 2px; line-height: 1.8; }
  .footer__col { padding-bottom: var(--space-lg); }                                          /* phones: tighter column rhythm */
  .footer__col--explore { padding-bottom: var(--space-md); margin-bottom: var(--space-md); }
  .footer__listen { margin-top: var(--space-md); }
  .footer__legal { flex-direction: column; align-items: center; text-align: center; font-size: var(--type-nav); }   /* phones: legal row centred, a size down */
  .footer__legal-links { justify-content: center; }
  .footer__copy { margin-left: 0; }
}

/* --- Nav over a light band: links, marks and burger go dark (Chiara 16 Sep) --- */
.nav--onlight .nav__pill { background: rgba(0, 0, 0, .05); }
.nav--onlight .nav__links a, .nav--onlight .cta--text { color: var(--ink-2); }
.nav--onlight .nav__links a:hover, .nav--onlight .nav__links a[aria-current="page"], .nav--onlight .cta--text:hover { color: rgba(0, 0, 0, .55); }
.nav--onlight .nav__logo img, .nav--onlight .nav__icon { filter: brightness(0); }   /* both are SVG <img>, so colour has to come from a filter */
.nav--onlight .nav__toggle span { background: var(--ink-2); }

/* Cookie notice (2 Oct): bottom-left card, glass like the nav; stacks on phones */
.consent { position: fixed; z-index: 60; left: var(--gutter); bottom: var(--space-md); max-width: 460px; display: grid; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-lg); background: var(--ink-3); border: 1px solid var(--line-dark); color: var(--white); font-size: var(--type-meta); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.consent[hidden] { display: none; }
.consent a { color: var(--accent); border-bottom: 1px solid currentColor; }
.consent__actions { display: flex; gap: var(--space-xs); justify-content: flex-end; }
@media (max-width: 640px) { .consent { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); max-width: none; } .consent__actions .cta { flex: 1; } }