/* =========================================================================
   faq.css - FAQ ("כל מה שחשוב לדעת") - Figma frame 1:4, y 5780-6560.
   Desktop (>=1280): section min 780u tall. Heading right (x1274-1741, y5844),
   collage frame 1:207 (x1146 y6032, 610x462) and accordion 1:173
   (x184 y5969, w853). The collage is a size container; its photos, the
   rotated "FAQ" and the sparkles are written in cqw of its 610px width.
   Accordion: rows 49px (pad 10/30, gap 45), icon 25px at the start
   (physical right), 1px brown bottom line, 24px between rows; answer
   Futurism Light 20/120%, 24px below its row, inset 100px from the right.
   ========================================================================= */

#faq {
  position: relative;
  background: var(--fg-paper);
  color: var(--fg-brown);
}

#faq .faq__heading {
  margin: 0;
  font-family: var(--font-heb);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-h2-fg);
  color: var(--fg-brown);
  text-align: right;
}

/* ---------------- collage ------------------------------------------- */
#faq .faq__collage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 610 / 462;
}
/* children are sized in cqw of the collage (610 Figma px wide); offsets
   are measured from the frame's outer edge */
#faq .faq__collage > * { position: absolute; }
#faq .faq__frame {
  inset: 0;
  border: 1px solid var(--fg-brown);
  border-radius: calc(100 / 610 * 100cqw);
}
#faq .faq__photo {
  display: block;
  object-fit: cover;
  block-size: calc(207 / 610 * 100cqw);
}
#faq .faq__photo--tl {
  left: calc(17 / 610 * 100cqw);  top: calc(17 / 610 * 100cqw);
  inline-size: calc(226 / 610 * 100cqw);
  border-radius: calc(100 / 610 * 100cqw) 0 0 0;
}
#faq .faq__photo--tr {
  left: calc(258 / 610 * 100cqw); top: calc(15 / 610 * 100cqw);
  inline-size: calc(337 / 610 * 100cqw);
  border-radius: 0 calc(100 / 610 * 100cqw) 0 0;
}
#faq .faq__photo--bottom {
  left: calc(17 / 610 * 100cqw);  top: calc(240 / 610 * 100cqw);
  inline-size: calc(578 / 610 * 100cqw);
  border-radius: 0 0 calc(100 / 610 * 100cqw) calc(100 / 610 * 100cqw);
}
/* "FAQ" Malfin 160 / 74%, box 284x118 rotated +90deg about its top-left
   (Figma 1:209 at x1831 y6198 -> x685 y166 inside the frame). */
#faq .faq__label {
  left: calc(685 / 610 * 100cqw);
  top: calc(166 / 610 * 100cqw);
  inline-size: calc(284 / 610 * 100cqw);
  block-size: calc(118 / 610 * 100cqw);
  transform: rotate(90deg);
  transform-origin: 0 0;
  direction: ltr;
  text-align: left;
  font-family: var(--font-display);
  font-size: calc(160 / 610 * 100cqw);
  line-height: .74;
  color: var(--fg-brown);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
#faq .faq__sparkle {
  inline-size: calc(26 / 610 * 100cqw);
  block-size: calc(26 / 610 * 100cqw);
  background: var(--fg-brown);
  -webkit-mask: url('../../assets/icons/sparkle.svg') center / contain no-repeat;
          mask: url('../../assets/icons/sparkle.svg') center / contain no-repeat;
}
#faq .faq__sparkle--1 { left: calc(-13 / 610 * 100cqw); top: calc(327 / 610 * 100cqw); }  /* 1:210 */
#faq .faq__sparkle--2 { left: calc(596 / 610 * 100cqw); top: calc(109 / 610 * 100cqw); }  /* 1:211 */

/* ---------------- accordion ----------------------------------------- */
#faq .faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}
#faq .faq__row { margin: 0; font: inherit; }
#faq .faq__q {
  display: flex;
  align-items: center;
  gap: calc(45 * var(--u));
  inline-size: 100%;
  min-block-size: max(44px, calc(49 * var(--u)));
  padding: 0 calc(30 * var(--u));
  border: 0;
  /* Figma draws the 1px stroke on a half pixel (2px @ ~50%); a 1px line at
     60% reads the same weight and tone */
  border-bottom: 1px solid rgba(93, 40, 9, .6);
  background: none;
  color: var(--fg-brown);
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.2;
  text-align: right;
  cursor: pointer;
  border-radius: 0;
}
#faq .faq__q-text { flex: 1 1 auto; }
#faq .faq__q:focus-visible {
  outline: 2px solid var(--fg-caramel);
  outline-offset: 2px;
}
/* + / - icon: two 1px lines, 25px */
#faq .faq__icon {
  position: relative;
  flex: 0 0 auto;
  inline-size: max(18px, calc(25 * var(--u)));
  block-size: max(18px, calc(25 * var(--u)));
}
#faq .faq__icon::before,
#faq .faq__icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  block-size: 1px;
  margin-top: -.5px;
  background: var(--fg-brown);
  transition: transform .35s ease, opacity .35s ease;
}
#faq .faq__icon::after { transform: rotate(90deg); }
#faq .faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); opacity: 0; }

/* answer: animated with grid rows (no height measuring, no jumps) */
#faq .faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
#faq .faq__a-inner { overflow: hidden; min-block-size: 0; }
#faq .faq__a p {
  margin: 0;
  padding-block: calc(24 * var(--u));   /* Figma: 24 gap + 3-line box */
  padding-inline: calc(100 * var(--u)) 0;   /* RTL: right inset 100 */
  font-family: var(--font-heb);
  font-weight: 300;
  font-size: max(15px, calc(20 * var(--u)));
  line-height: 1.2;
  color: var(--fg-brown);
  text-align: right;
}
/* closed state only once JS is ready, so content stays readable without JS */
#faq [data-accordion].is-ready .faq__item:not(.is-open) .faq__a {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), visibility 0s .4s;
}
@media (prefers-reduced-motion: reduce) {
  #faq .faq__a, #faq .faq__icon::before, #faq .faq__icon::after { transition: none !important; }
}

/* ======================= DESKTOP (Figma geometry) ===================== */
@media (min-width: 1280px) {
  /* The list stays in normal flow so an opened answer (or larger min font
     sizes near 1280) grows the section instead of being clipped.
     189 + list (510 in Figma, q5 open) + 81 = 780u at 1920. */
  #faq {
    min-block-size: calc(780 * var(--u));
    padding: calc(189 * var(--u)) 0 calc(81 * var(--u));
  }
  #faq .faq__heading {
    position: absolute;
    right: calc(179 * var(--u));
    top: calc(64 * var(--u));
  }
  #faq .faq__collage {
    position: absolute;
    left: calc(1146 * var(--u));
    top: calc(252 * var(--u));
    inline-size: calc(610 * var(--u));
  }
  #faq .faq__list {
    position: relative;
    margin-left: calc(184 * var(--u));
    margin-right: auto; /* RTL: without an auto margin the left one is ignored */
    inline-size: calc(853 * var(--u));
  }
}

/* ======================= TABLET + MOBILE (stacked) ==================== */
@media (max-width: 1279.98px) {
  #faq {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(2rem, 6vw, 3rem);
    padding: clamp(3.5rem, 9vw, 5rem) var(--container-pad, 20px);
    overflow: hidden;
  }
  #faq .faq__heading { font-size: clamp(38px, 8.5vw, 64px); }
  #faq .faq__collage {
    inline-size: min(88%, 520px);   /* the rotated FAQ adds ~12% on the right */
    align-self: flex-end;           /* RTL column: flex-end = physical left */
  }
  #faq .faq__list { gap: 16px; }
  #faq .faq__q { gap: 18px; padding: 10px 4px; font-size: clamp(16px, 2.3vw, 19px); }
  #faq .faq__a p { padding: 14px 40px 6px 0; font-size: clamp(15px, 2.1vw, 17px); line-height: 1.45; }
}