/* Section styles: faq (#pitanja): three questions.
   Unlayered, so it overrides css/base.css. Every selector is scoped under [data-section="faq"].
   Phones/tablets: heading, a full-bleed photo band, then the question plate overlapping the band's bottom edge.
   Desktop (1024+): 12-column grid; heading top-left, the photo on the right spanning both rows, the plate
   overlapping the photo's left edge by two columns. */

[data-section="faq"] {
  --faq-pad: clamp(18px, 2.6vw, 40px);
  --faq-gap: clamp(14px, 1.8vw, 28px);
  --faq-icon: 40px;
  --faq-num: 30px;
}
/* small phones: a narrower number column and ring give the question more width (the whole row is the target) */
@media (max-width: 479px) { [data-section="faq"] { --faq-icon: 36px; --faq-num: 24px; --faq-gap: 12px; --faq-pad: 16px; } }

[data-section="faq"] .faq__grid { display: grid; }
[data-section="faq"] .faq__head { margin-bottom: clamp(24px, 4vw, 40px); }

/* ---------------------------------------------------------------- photo */
[data-section="faq"] .faq__photo {
  position: relative; z-index: 0; margin: 0 calc(-1 * var(--safe-r)) 0 calc(-1 * var(--safe-l));
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2);
}
@media (min-width: 640px) { [data-section="faq"] .faq__photo { aspect-ratio: 16 / 9; } }
@media (orientation: landscape) and (max-height: 520px) { [data-section="faq"] .faq__photo { aspect-ratio: 3 / 1; } }
[data-section="faq"] .faq__lens { position: absolute; inset: -8% 0; will-change: transform; }
[data-section="faq"] .faq__lens > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos, 45% 42%);
  transform: translate3d(var(--tx, 0%), var(--ty, 0%), 0) scale(var(--zs, 1.04)); transform-origin: 50% 50%;
  transition: transform 1.5s var(--ease-out), filter .9s var(--ease-out);
  filter: contrast(1.08) brightness(.8);
}
/* red stage light: fades in while a question is open (multiply keeps the blacks black) */
[data-section="faq"] .faq__photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 80% at 46% 44%, #ff4b3e 0%, var(--blood) 45%, #3a0606 100%);
  mix-blend-mode: multiply; opacity: 0; transition: opacity 1s var(--ease-out);
}
[data-section="faq"] .faq__photo.is-lit::before { opacity: .78; }
[data-section="faq"] .faq__photo.is-lit .faq__lens > img { filter: contrast(1.18) brightness(1); }
/* edges fade into the page so the overlapping plate sits on dark */
[data-section="faq"] .faq__photo::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, .35) 0%, rgba(5, 5, 5, 0) 26%, rgba(5, 5, 5, 0) 58%, rgba(5, 5, 5, .92) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, .45) 0%, rgba(5, 5, 5, 0) 30%);
}
/* registration marks in the four corners */
[data-section="faq"] .faq__marks { position: absolute; inset: 14px; z-index: 3; pointer-events: none; }
[data-section="faq"] .faq__marks > i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--blood); }
[data-section="faq"] .faq__marks > i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
[data-section="faq"] .faq__marks > i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
[data-section="faq"] .faq__marks > i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
[data-section="faq"] .faq__marks > i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
/* below 1024 the plate covers the photo's bottom edge: keep only the top marks */
@media (max-width: 1023px) { [data-section="faq"] .faq__marks > i:nth-child(n+3) { display: none; } }

/* ---------------------------------------------------------------- question plate */
[data-section="faq"] .faq__list {
  position: relative; z-index: 1; margin-top: clamp(-72px, -9vw, -40px);
  padding: 6px var(--faq-pad);
  background: var(--ink); border-color: var(--line-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6);
}

[data-section="faq"] .faq__item { position: relative; border-top-color: var(--line-2); }
/* open marker: a blood bar on the plate's left edge */
[data-section="faq"] .faq__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--faq-pad) - 1px); top: 14px; bottom: 14px; width: 3px;
  background: var(--blood); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--ease-out);
}
[data-section="faq"] .faq__item[open]:not(.is-closing)::before { transform: scaleY(1); }

[data-section="faq"] .faq__item > summary {
  position: relative; display: grid; grid-template-columns: var(--faq-num) minmax(0, 1fr) var(--faq-icon); align-items: center;
  column-gap: var(--faq-gap); min-height: clamp(72px, 6vw, 96px); padding: 14px 0;
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-acc); line-height: 1.16;
  letter-spacing: .012em; text-transform: uppercase; color: var(--bone);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
[data-section="faq"] .faq__item > summary::after { content: none; }
[data-section="faq"] .faq__item > summary:focus-visible { outline-offset: 2px; }
/* pointer light inside the hovered row (fine pointer only; --mx/--my set by faq.js) */
[data-section="faq"] .faq__item > summary::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--faq-pad)); right: calc(-1 * var(--faq-pad));
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(217, 28, 28, .16), rgba(217, 28, 28, 0) 70%);
  opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none;
}
[data-section="faq"] .faq__item { isolation: isolate; }

[data-section="faq"] .faq__num {
  align-self: center;
  font-family: var(--f-mono); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: .12em; color: var(--mute);
  transition: color .3s;
}
[data-section="faq"] .faq__q { display: block; transition: transform .45s var(--ease-out), color .3s; }

/* + becomes − inside a square; it fills blood when open (same icon as the education accordion) */
[data-section="faq"] .faq__icon {
  position: relative; display: block; width: var(--faq-icon); height: var(--faq-icon); justify-self: end;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), transform .55s var(--ease-out);
}
[data-section="faq"] .faq__icon::before, [data-section="faq"] .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  background: var(--blood-hot); transition: transform .45s var(--ease-out), background-color .3s;
}
[data-section="faq"] .faq__icon::after { transform: rotate(90deg); }
[data-section="faq"] .faq__item[open]:not(.is-closing) .faq__icon { background: var(--blood); border-color: var(--blood); transform: rotate(180deg); }
[data-section="faq"] .faq__item[open]:not(.is-closing) .faq__icon::before,
[data-section="faq"] .faq__item[open]:not(.is-closing) .faq__icon::after { background: var(--white); }
[data-section="faq"] .faq__item[open]:not(.is-closing) .faq__icon::after { transform: rotate(90deg) scaleX(0); }
[data-section="faq"] .faq__item[open]:not(.is-closing) .faq__num { color: var(--blood-hot); }
[data-section="faq"] .faq__item[open]:not(.is-closing) .faq__q { color: var(--white); }

@media (hover: hover) and (pointer: fine) {
  [data-section="faq"] .faq__item > summary:hover::before { opacity: 1; }
  [data-section="faq"] .faq__item > summary:hover .faq__q { transform: translateX(8px); color: var(--white); }
  [data-section="faq"] .faq__item > summary:hover .faq__num { color: var(--blood-hot); }
  [data-section="faq"] .faq__item > summary:hover .faq__icon { border-color: var(--blood); }
}
/* touch feedback */
[data-section="faq"] .faq__item > summary:active::before { opacity: 1; transition-duration: 0s; }

/* answer: the animated box (.acc__body) has no padding; the inner block carries it */
[data-section="faq"] .faq__item .acc__body { padding: 0; color: inherit; }
[data-section="faq"] .faq__a { padding: 0 0 clamp(22px, 2.2vw, 30px); }
[data-section="faq"] .faq__a > p {
  max-width: 54ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--bone-dim);
}
@media (min-width: 640px) {
  [data-section="faq"] .faq__a { padding-left: calc(var(--faq-num) + var(--faq-gap)); padding-right: calc(var(--faq-icon) + var(--faq-gap)); }
}

/* ---------------------------------------------------------------- desktop composition */
@media (min-width: 1024px) {
  [data-section="faq"] .faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  [data-section="faq"] .faq__head { grid-column: 1 / 7; grid-row: 1; margin-bottom: 0; padding-top: clamp(8px, 2vw, 40px); }
  [data-section="faq"] .faq__photo { grid-column: 7 / 13; grid-row: 1 / 3; margin: 0; aspect-ratio: 1440 / 1480; border-radius: var(--radius); }
  [data-section="faq"] .faq__photo::after {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .7) 100%),
      linear-gradient(90deg, rgba(5, 5, 5, .7) 0%, rgba(5, 5, 5, 0) 38%);
  }
  [data-section="faq"] .faq__list { grid-column: 1 / 9; grid-row: 2; margin-top: clamp(32px, 4vw, 64px); }
}

/* ---------------------------------------------------------------- reduced motion: no reframe, no shift */
[data-motion="reduced"] [data-section="faq"] .faq__lens > img { transform: scale(1.04); }
[data-motion="reduced"] [data-section="faq"] .faq__lens { transform: none !important; }