/* Homepage FAQ section framing; shared FAQ cells are styled globally in faq-grid.css. */
.home-faq {
  padding-block: 0;
  border-block: 1px solid var(--mega-media-border);
}

.home-faq > .container {
  padding-inline: 0;
}

.home-faq__grid {
  position: relative;
  isolation: isolate;
  grid-template-rows: var(--home-faq-media-h);
  gap: 0;
}

/* The image and FAQ panel share the same fixed-height composition. The FAQ
   surface itself never becomes a nested scroll container: wheel/touch input
   remains owned by the document at every viewport width, so the whole section
   moves naturally while the image keeps its fixed crop. */
.home-faq__col {
  position: relative;
  z-index: var(--z-raised);
  min-inline-size: 0;
  grid-area: 1 / 1;
  min-block-size: 0;
  align-self: center;
  overflow: visible;
  margin: var(--s-8) var(--gutter-x);
  padding: var(--s-8) var(--s-6);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
}

.home-faq__col .faqs {
  margin-block-start: var(--s-6);
  padding-block-start: 0;
}

.home-faq__media {
  grid-area: 1 / 1;
  position: relative;
  z-index: var(--z-base);
  min-inline-size: 0;
  min-block-size: 0;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  margin-block-start: 0;
  border-block-start: 0;
  border-radius: 0;
}

.home-faq__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.home-faq__col .faqs + p {
  margin-block-start: var(--s-7);
}

@media (min-width: 1024px) {
  .home-faq__grid {
    inline-size: 100%;
    min-inline-size: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-rows: var(--home-faq-media-h);
    gap: 0;
    align-items: stretch;
  }

  /* The image owns a little over half the row. The FAQ panel then extends one
     spacing step into that image cell, preserving the content measure while
     creating the requested cutout composition without changing grid flow. */
  .home-faq__col {
    grid-area: auto;
    min-block-size: 0;
    max-block-size: none;
    block-size: 100%;
    align-self: stretch;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline: 0;
    margin-inline-end: calc(var(--s-10) * -1);
    padding: var(--section-y) calc(var(--gutter-x) + var(--s-10)) var(--section-y) var(--gutter-x);
  }

  .home-faq__media {
    grid-area: auto;
    min-inline-size: 0;
    min-block-size: 0;
    overflow: hidden;
    block-size: 100%;
    align-self: stretch;
    margin-block-start: 0;
    border-block-start: 0;
    border-inline-start: 1px solid var(--mega-media-border);
  }

  /* THE PANEL RESERVES ROOM FOR ITS TALLEST ANSWER instead of growing when one
     opens. The photo above is stretched to the row's height, so every
     expansion re-sized and re-cropped it and shifted everything below the
     section with it. Reserving the space up front means opening an answer
     fills room the panel already had: the row height never changes, so the
     photo holds still. Reserving the TALLEST answer is enough because the
     accordion is single-open (main.js) — the worst case is one expanded
     answer, never a sum of them. main.js measures it and sets the property;
     with script off it is never set and the panel grows as it did before. */
}