/* FAQ page — pink photo/quote banner + contact grid, then a plain
   line-separated Q&A panel. Scoped to .faq-page (faqs.php); the accordion's
   own .faq__* classes and open/close animation live in main.css / js/main.js. */
.faq-page { padding: 0 0 100px; }

/* ── Hero: photo + quote + "Get in touch" ────────────────────────────────── */
/* No shared page-hero band any more — this bleeds behind the fixed header
   itself, same trick as .rev-hero/.del-hero: a locally scoped
   --faqp-header-space compensates for body's own top padding. */
.faqp-hero {
    --faqp-header-space: calc(var(--marquee-height) + var(--topbar-height) + var(--header-height) + var(--header-offset));
    padding-top: calc(var(--faqp-header-space) + 28px);
    margin-top:  calc(-1 * var(--faqp-header-space));
    margin-bottom: 70px;
    background:  var(--color-pink-50);
}

.faqp-hero__band {
    display:               grid;
    grid-template-columns: 0.9fr 1.15fr 0.95fr;
    align-items:           center;
    gap:                   32px;
    padding-bottom:        36px;
}

.faqp-hero__media {
    align-self:    stretch;
    min-height:    280px;
    border-radius: 20px;
    overflow:      hidden;
}
.faqp-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.faqp-hero__quote {
    position:      relative;
    padding:       30px 34px 34px;
    border-radius: 18px;
    background:    rgba(255, 255, 255, 0.9);
}
.faqp-hero__mark {
    display:     block;
    margin-bottom: 6px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   40px;
    line-height: 1;
    color:       var(--color-primary);
    opacity:     0.6;
}
.faqp-hero__lead {
    margin:      0;
    font-size:   19px;
    line-height: 28px;
    font-weight: 600;
    color:       var(--color-text);
}
.faqp-hero__text {
    margin:      12px 0 0;
    font-size:   14px;
    line-height: 22px;
    color:       var(--color-muted);
}
.faqp-hero__heart {
    position:  absolute;
    right:     26px;
    bottom:    22px;
    display:   flex;
    color:     var(--color-primary);
    opacity:   0.7;
}

.faqp-hero__contact { padding-left: 8px; border-left: 1px solid rgba(0, 0, 0, 0.08); }

.faqp-hero__contact-title {
    margin:      0 0 18px;
    font-size:   17px;
    line-height: 23px;
    font-weight: 700;
    color:       var(--color-text);
}

.faqp-hero__contact-list {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   18px 16px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.faqp-hero__contact-list a {
    display:         flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    color:           inherit;
}

.faqp-hero__contact-icon {
    flex-shrink:     0;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border-radius:   50%;
    background:      var(--color-pink-100);
    color:           var(--color-primary);
    transition:      background var(--transition), color var(--transition);
}
.faqp-hero__contact-list a:hover .faqp-hero__contact-icon {
    background: var(--color-primary);
    color:      #ffffff;
}

.faqp-hero__contact-body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
    font-size:      13px;
    line-height:    18px;
    color:          var(--color-text);
}
.faqp-hero__contact-label { font-weight: 700; }
.faqp-hero__contact-body span:last-child {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    color:         var(--color-muted);
}

/* ── Panel: eyebrow/title/CTA + accordion ─────────────────────────────────── */
.faqp-panel-wrp {
    display:               grid;
    grid-template-columns: 0.62fr 1fr;
    align-items:           start;
    gap:                   50px;
}

.faqp-panel-aside { position: sticky; top: calc(var(--topbar-height) + var(--header-height) + var(--header-offset) + 24px); }

.faqp-panel-eyebrow {
    margin:         0 0 10px;
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.faqp-panel-title {
    margin:      0;
    font-size:   42px;
    line-height: 50px;
    font-weight: 500;
    color:       var(--color-text);
}
.faqp-panel-title strong { font-weight: 700; }

.faqp-panel-rule {
    display:       block;
    width:         48px;
    height:        3px;
    margin:        20px 0;
    border-radius: 2px;
    background:    var(--color-primary);
}

.faqp-panel-subtitle {
    font-size:   15px;
    line-height: 24px;
    color:       var(--color-muted);
}
.faqp-panel-subtitle p { margin: 0; }
.faqp-panel-subtitle p + p { margin-top: 10px; }
.faqp-panel-subtitle strong { color: var(--color-text); }

.faqp-panel-cta {
    display:      inline-flex;
    align-items:  center;
    gap:          8px;
    height:       46px;
    padding:      0 24px;
    margin-top:   26px;
    font-size:    14px;
}

/* Flat, line-separated list — overrides the boxed-card look .faq__item has
   by default (css/main.css), while keeping its classes so js/main.js's
   accordion animation keeps working unmodified. */
.faqp-panel {
    padding:       10px 44px;
    border-radius: 22px;
    background:    var(--color-pink-50);
}
.faqp-panel .faq__item {
    background:    transparent;
    border-radius: 0;
    border-bottom: 1px solid var(--color-pink-100);
}
.faqp-panel .faq__list > .faq__item:last-child { border-bottom: none; }
.faqp-panel .faq__question { padding: 18px 0; font-size: 16px; font-weight: 600; }
.faqp-panel .faq__answer   { padding: 0 0 18px 30px; }
.faqp-panel .faq__marker   { color: var(--color-primary); }

@media (max-width: 1200px) {
    .faqp-hero__band { grid-template-columns: minmax(0, 1fr); }
    .faqp-hero__media { min-height: 220px; }
    .faqp-hero__contact { padding-left: 0; border-left: none; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
}

@media (max-width: 1024px) {
    .faq-page { padding-bottom: 80px; }
    .faqp-hero { padding-top: calc(var(--faqp-header-space) + 24px); margin-bottom: 50px; }
    .faqp-panel-wrp { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .faqp-panel-aside { position: static; }
    .faqp-panel-title { font-size: 34px; line-height: 42px; }
    .faqp-panel { padding: 6px 28px; }
}

@media (max-width: 767px) {
    .faq-page { padding-bottom: 60px; }
    .faqp-hero { padding-top: calc(var(--faqp-header-space) + 18px); margin-bottom: 36px; }
    .faqp-hero__band { gap: 20px; }
    .faqp-hero__quote { padding: 22px 20px 26px; }
    .faqp-hero__contact-list { grid-template-columns: minmax(0, 1fr); }

    .faqp-panel-title { font-size: 27px; line-height: 34px; }
    .faqp-panel { padding: 4px 18px; }
    .faqp-panel .faq__question { font-size: 15px; }
    .faqp-panel .faq__answer { padding-left: 20px; }
}