/* Section 12 FAQ (#faq), owner S4 — design v5 sections/12-faq.html.
   Paper panel (.mc-band + .mc-panel--paper): head on the left (flex 1 1 300px), questions on the right (2 1 520px).
   Each question is a <details>; without JS the browser shows/hides the answer. With JS, static/marketing/js/faq.js
   marks the list .is-enhanced and an open question .is-open: the answer then slides open/closed
   (grid-template-rows 0fr -> 1fr, as the design) and the round "+" turns into a "×". */

.faq-panel {
  padding: clamp(40px, 6vw, 96px) clamp(18px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 5vw, 72px);
}

.faq-head { flex: 1 1 300px; min-width: 0; }
.faq-head__text {
  margin: 16px 0 0;
  max-width: 340px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--mc-text);
  text-wrap: pretty;
}
.faq-head__cta { margin-top: 22px; }

.faq-list { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.faq-item { background: var(--mc-cream); border-radius: 28px; overflow: hidden; }

.faq-q {
  min-height: 64px;
  padding: 14px 16px 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 28px;
  list-style: none;
  cursor: pointer;
  color: var(--mc-ink);
  -webkit-tap-highlight-color: transparent;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
/* Inside the rounded card (which clips): the focus ring goes inside. */
.faq-q:focus-visible { outline-offset: -3px; }
.faq-q__text {
  margin: 0;
  min-width: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.35;
}
.faq-q__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mc-sand);
  color: var(--mc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s var(--mc-ease-out), background-color .2s ease;
}
.faq-q__icon svg { display: block; }

.faq-a { display: grid; grid-template-rows: 1fr; }
.faq-a__inner { min-height: 0; overflow: hidden; }
.faq-a__text {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mc-text);
  text-wrap: pretty;
  transition: opacity .2s ease;
}

/* Open question: "+" turned into "×" on caramel. Without JS: [open]; with faq.js: .is-open (it stays [open] while
   its answer slides closed). */
.faq-list:not(.is-enhanced) .faq-item[open] .faq-q__icon,
.faq-list.is-enhanced .faq-item.is-open .faq-q__icon { transform: rotate(45deg); background: var(--mc-caramel); }

.faq-list.is-enhanced .faq-a { grid-template-rows: 0fr; transition: grid-template-rows .25s var(--mc-ease-out); }
.faq-list.is-enhanced .faq-a__text { opacity: 0; }
.faq-list.is-enhanced .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-list.is-enhanced .faq-item.is-open .faq-a__text { opacity: 1; }