/* ==========================================================================
   Masera & Co — FAQ page additions to site.css (body.faq-page.v2 only):
   the questions layout (sticky intro + numbered accordion) and focal points.
   ========================================================================== */

/* Page head: a quiet professional workspace behind the question-led copy. */
body.v2 .faq-head .mc-pagehead-media img {
  object-position: 50% 58%;
}

/* 01 Questions: intro on the left (follows the reader on wide screens),
   accordion on the right. */
body.v2 .faq-layout { row-gap: clamp(40px, 5vw, 64px); align-items: start; }
body.v2 .faq-aside { grid-column: 1 / span 4; grid-row: 1; }
body.v2 .faq-list { grid-column: 6 / -1; grid-row: 1; margin-top: 0; }

body.v2 .faq-intro { margin-top: clamp(20px, 2.2vw, 32px); max-width: 30em; }

/* Accordion rows: gold numeral, question as a real h3, generous touch target */
body.v2 .faq-list summary {
  justify-content: flex-start;
  align-items: center;
  min-height: 44px;
  padding-block: 26px;
}

body.v2 .faq-list summary::after {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px auto;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--mc-gold-ink-strong);
}

body.v2 .faq-list summary:focus-visible {
  outline: 2px solid var(--mc-gold-ink-strong);
  outline-offset: 4px;
  border-radius: 2px;
}

body.v2 .faq-n {
  flex: none;
  align-self: baseline;
  width: 2.6rem;
  font-family: var(--mc-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--mc-gold-ink-strong);
  font-variant-numeric: lining-nums;
}

body.v2 .faq-q {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: inherit;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

body.v2 .faq-list details > p {
  max-width: 38em;
  padding-left: calc(2.6rem + 24px);
  padding-bottom: 32px;
  font-size: clamp(1.02rem, 0.96rem + 0.22vw, 1.15rem);
  line-height: 1.7;
}

/* Explore thumbnails (both frames are 3:2 via .mc-nav-thumb) */
body.v2 .op-faq-about { object-position: 50% 40%; }
body.v2 .op-faq-careers { object-position: 30% 40%; } /* keep the seated and standing colleagues in a square crop */
body.v2 .faq-keep { white-space: nowrap; }

/* Closing CTA: keep the Custom House tower in frame, sky behind the text */
body.v2 .faq-cta .mc-cta-media img { object-position: 100% 40%; }

@media (min-width: 1200px) {
  body.v2 .faq-aside { position: sticky; top: 128px; }
}

@media (max-width: 1199px) {
  body.v2 .faq-aside,
  body.v2 .faq-list { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 767px) {
  /* Hold a steady shade beneath the copy on narrow viewports. */
  body.v2 .faq-head .mc-pagehead-media img { object-position: 50% 30%; }
  body.v2 .faq-head .mc-pagehead-shade {
    background:
      linear-gradient(180deg, rgba(11, 25, 44, 0.5) 0%, rgba(11, 25, 44, 0.62) 30%, rgba(11, 25, 44, 0.84) 55%, rgba(11, 25, 44, 0.9) 100%);
  }

  body.v2 .faq-n { width: 2rem; }
  body.v2 .faq-list details > p { padding-left: calc(2rem + 12px); }
  body.v2 .faq-list summary { gap: 12px; padding-block: 20px; }
  body.v2 .faq-list summary::after { margin-right: -12px; }

  body.v2 #explore .mc-nav-title { font-size: 1.3rem; }

  body.v2 .faq-cta .mc-cta-media img { object-position: 88% 40%; }
}

@media (min-width: 1800px) {
  body.v2 .faq-n { width: 3.2rem; font-size: 1.15rem; }
  body.v2 .faq-list details > p { padding-left: calc(3.2rem + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  body.v2 .faq-list summary::after { transition: none; }
}