/* ============================================================
   FAQ CARD GRID WRAPPER
============================================================ */
.faq-cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
    perspective: 1200px;
}

@media screen and (max-width: 320px) {
    .faq-cards-wrapper {
        grid-template-columns: auto;
    }
}

/* ============================================================
   BASE CARD SETTINGS
============================================================ */
.faq-card {
    width: 100%;
    height: 420px;
    position: relative;
    cursor: pointer;
}

.faq-card-inner {
  border-radius: 16px;
    position: absolute;
    inset: 0;
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.faq-card:hover .faq-card-inner {
    transform: rotateY(180deg);
}

.faq-card-front,
.faq-card-back {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
}

.faq-card-back {
    transform: rotateY(180deg);
}

/* ============================================================
   COLOR LOGIC — FRONT ITERATES, BACK MATCHES FRONT
============================================================ */

/* ---------- EVEN CARDS (0,2,4…) = DARK THEME ---------- */
.faq-card.even .faq-card-front,
.faq-card.even .faq-card-back {
    background: var(--dark-blue);
    color: #fff;
}

/* Underline = green */
.faq-card.even .faq-number::after,
.faq-card.even .faq-answer-title::after {
    background: var(--green);
}

/* ---------- ODD CARDS (1,3,5…) = LIGHT THEME ---------- */
.faq-card.odd .faq-card-front,
.faq-card.odd .faq-card-back {
    background: var(--lt-blue);
    color: #000;
}

/* Underline = orange */
.faq-card.odd .faq-number::after,
.faq-card.odd .faq-answer-title::after {
    background: var(--yellow);
}

/* ============================================================
   TITLE UNDERLINE SPACING + STYLE
============================================================ */
.faq-number,
.faq-answer-title {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.faq-number::after,
.faq-answer-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px; /* thinner line */
    border-radius: 2px;
}

/* ============================================================
   CONTENT STYLES
============================================================ */
.faq-number {
    font-size: 22px;
    font-weight: 800;
}

.faq-question {
    margin-top: 12px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    flex-grow: 1;
}

.faq-view-answer {
    margin-top: auto;
    font-weight: 600;
    font-size: 16px;
    opacity: 0.9;
}

.faq-answer-title {
    font-size: 24px;
    font-weight: 800;
}

.faq-answer-text {
    margin: 20px 0 30px;
    font-size: 17px;
    line-height: 1.6;
}

/* ============================================================
   OUTLINED READ MORE BUTTON
============================================================ */

.faq-readmore-btn {
    margin-top: auto;
    align-self: flex-start;
    padding: 10px 20px;
    border-radius: 10px;
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid currentColor; /* outline matches text color */
    color: inherit; /* uses dark or light automatically */
    transition: all 0.25s ease;
}

.faq-card.odd .faq-readmore-btn {
    border: 2px solid var(--dark-blue);
    color: var(--dark-blue);
}
/* .faq-card.even .faq-readmore-btn:hover {
    background: rgba(0,0,0,0.1);
} */
/* Hover: fill the button with a subtle tint */
.faq-readmore-btn:hover {
    background: rgba(255,255,255,0.15); /* default for dark cards */
    color:white!important;
    border: 2px solid white!important;
}

/* Light theme hover needs darker tint */
/* .faq-card.odd .faq-readmore-btn:hover {
    background: rgba(0,0,0,0.1);
} */

.faq-arrow {
    padding-left: 10px;
    transform: translateY(2px); /* adjust vertical alignment */
}

/* ============================================================
   IMPACT CARD OVERRIDES (FRONT ONLY)
============================================================ */

/* Remove underline on the front title only */
.faq-card.is-impact .faq-card-front .faq-number::after {
    display: none;
}

/* Let the title push itself to the bottom */
.faq-card.is-impact .faq-card-front .faq-number {
    margin-top: auto;   /* THIS is the key */
    padding-bottom: 0;
    margin-bottom: 6px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
}

/* Keep CTA directly under the title */
.faq-card.is-impact .faq-card-front .faq-view-answer {
    margin-top: 0;     /* override base rule */
    opacity: 0.9;
}

/* ============================================================
   IMPACT CARD SQUARE LAYOUT
============================================================ */
.faq-card.is-impact {
    width: 100%;
    aspect-ratio: 1 / 1; /* force square shape */
    height: auto;         /* override fixed height */
}

/* Inner container fills the square card */
.faq-card.is-impact .faq-card-inner {
    height: 100%;
}

/* Front and back fill the inner container */
.faq-card.is-impact .faq-card-front,
.faq-card.is-impact .faq-card-back {
    height: 100%;
}

/* Optional: min/max size so squares stay reasonable */
.faq-card.is-impact {
    min-width: 260px;
    max-width: 400px;
}

/* ===========================================================
    IMPACT CARD BACK
==============================================================*/

.faq-card.even.is-impact .faq-card-back {
    background: var(--lt-blue);
}

.faq-card.is-impact .faq-card-back {
    color: #000000; /* sets all front text to white */
}

/* Underline = orange */
.faq-card.is-impact .faq-answer-title::after {
    background: var(--yellow);
}

/* ============================================================
   IMPACT BACK HEADER ROW — FULL-WIDTH UNDERLINE (INLINE BACK)
============================================================ */

.faq-card.is-impact .faq-back-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 24px; 
    width: 100%;
}

.read-more {
    font-style: italic;
    color: #ededed;
}

.faq-card.even .read-more {
    color: #52b3d9;
}
/* Full-width underline under both Impact + Back */
.faq-card.is-impact .faq-back-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--yellow);
}

/* Title: do NOT be full width */
.faq-card.is-impact .faq-answer-title {
    width: auto;
    margin: 0;
    padding-bottom: 0; /* underline now handled by header row */
}

/* Kill original underline for Impact title */
.faq-card.is-impact .faq-answer-title::after {
    display: none;
}

/* Back CTA stays inline right */
.faq-card.is-impact .faq-back-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    opacity: 0.9;
    cursor: pointer;
    white-space: nowrap;
}

.faq-card.is-impact .faq-back-cta .faq-arrow-back {
    transform: translateY(2px);
}
/* ============================================================
   IMPACT CARD BACKGROUND OVERLAY (FRONT)
============================================================ */

/* Gradient overlay on top of background image */
.faq-card.is-impact .faq-card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background-color: hsla(197,95%,38%,0.75);
    background-image:
        radial-gradient(at 0% 0%, hsla(120,60%,50%,0.6) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(48,100%,50%,0.6) 0px, transparent 50%),
        radial-gradient(at 0% 99%, hsla(197,95%,17%,1) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(197,95%,38%,1) 0px, transparent 50%);
    z-index: 1;
    pointer-events: none;
}

/* Ensure text sits above the overlay */
.faq-card.is-impact .faq-card-front > * {
    position: relative;
    z-index: 2;
}

/* Make background image behave nicely */
.faq-card.is-impact .faq-card-front {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* ============================================================
   IMPACT CARD FRONT: WHITE TEXT
============================================================ */
.faq-card.is-impact .faq-card-front {
    color: #ffffff; /* sets all front text to white */
}

/* Optional: ensure View Impact CTA is fully visible */
.faq-card.is-impact .faq-card-front .faq-view-answer {
    color: #ffffff;
}

/* Optional: title and number explicitly white */
.faq-card.is-impact .faq-card-front .faq-number {
    color: #ffffff;
}