/* =========================================================
   Reusable Page FAQ  (template-parts/global-faq.php)
   - With image   : 2 columns (image 1/3 + FAQ 2/3)
   - Without image: FAQ full width (centered)
   - Mobile       : heading ? image ? questions (stacked)
========================================================= */

.page-faq {
  padding: 100px 0;
}

.page-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "list";
  row-gap: 0;
}

/* ---------- Heading ---------- */
.page-faq__head {
  grid-area: head;
  text-align: center;
}

.page-faq__head .faq-heading {
  margin-top: 0;
  margin-bottom: 30px;
}

/* ---------- Questions ---------- */
.page-faq__list {
  grid-area: list;
  min-width: 0;
}

/* Full width (no image): keep the accordion readable */
.page-faq--full .page-faq__list {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.page-faq--full .prodigy-accordion {
  padding: 0;
}

/* ---------- Image ---------- */
.page-faq__media {
  grid-area: media;
  position: relative;
  min-height: 420px;
  overflow: hidden;
  clip-path: polygon(
    calc(100% - 42px) 0,
    100% 42px,
    100% 100%,
    42px 100%,
    0 calc(100% - 42px),
    0 0
  );
}

.page-faq__media .page-faq__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 2 column layout (desktop) ---------- */
.page-faq--has-image .page-faq__grid {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "media head"
    "media list";
  column-gap: 40px;
}

.page-faq--has-image.page-faq--image-right .page-faq__grid {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-areas:
    "head media"
    "list media";
}

/* =========================================================
   Responsive
========================================================= */
@media (min-width: 1820px) {
  .page-faq {
    padding: 120px 0;
  }
}

@media (max-width: 1200px) {
  .page-faq--has-image .prodigy-accordion {
    padding: 0 40px;
  }
}

@media (max-width: 991px) {
  .page-faq {
    padding: 60px 0;
  }

  .page-faq--has-image .page-faq__grid,
  .page-faq--has-image.page-faq--image-right .page-faq__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "head"
      "media"
      "list";
    column-gap: 0;
  }

  .page-faq__media {
    min-height: 320px;
    margin-bottom: 30px;
  }

  .page-faq .prodigy-accordion,
  .page-faq--has-image .prodigy-accordion {
    padding: 0;
  }
}

@media (max-width: 575px) {
  .page-faq {
    padding: 40px 0;
  }

  .page-faq__media {
    min-height: 240px;
  }

  .page-faq__head .faq-heading {
    margin-bottom: 20px;
  }
}