/**
 * Section: FAQ ("Before you place your order").
 * Two columns on wide screens, stacked on mobile. Hairline rules between
 * questions; the plus turns into a minus when open.
 */

.faq {
  background: var(--surface);
  padding-block: var(--section-space-m);
  padding-inline: var(--space-gutter);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-l);
}

.faq-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.faq-intro p {
  max-width: 44ch;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: var(--border-hair) solid var(--hairline);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: var(--tap-target);
  padding-block: var(--space-s);
  font-weight: var(--weight-strong);
  font-size: var(--text-small);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--brand-accent);
}

.faq-toggle {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  color: var(--brand-accent);
}

.faq-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-block-end: var(--space-s);
  max-width: 62ch;
}

.faq-answer p {
  font-size: var(--text-small);
}

.faq-answer a {
  color: var(--brand-accent);
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .faq-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-2xl);
  }
}