/**
 * LBF — About Our Pageant page overrides
 * v29.38.13
 *
 * Diagnostic showed cardTop=225 for all 6 (cards aligned), but wrapTop
 * varied 226-241 because the button parent has top padding / inline-block
 * baseline behavior that pushed the photo wrapper down by varying amounts.
 *
 * Fix: zero the button's top padding, zero the photo wrapper's top margin,
 * make the button display:flex so the wrapper sits exactly at the top.
 */

/* Force the card button to layout the photo wrapper at the top with
   zero padding/margin above it. */
.lbfpg-overview-divisions .lbfpg-card.lbfpg-card--division {
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The shimmer span sits before the photo in DOM order but is
   absolutely positioned — make sure that's the case here too. */
.lbfpg-overview-divisions .lbfpg-card.lbfpg-card--division .lbfpg-card__shimmer {
    position: absolute !important;
    top: 0 !important;
}

/* Photo wrapper: zero top margin, fixed height, flush to card top */
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__img {
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: 320px !important;
    max-height: 320px !important;
    min-height: 320px !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    flex: 0 0 320px !important;
    order: -1 !important;
}

/* The image inside crops to fill */
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__img img {
    width: 100% !important;
    height: 320px !important;
    max-height: 320px !important;
    min-height: 320px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Kill hover scale */
.lbfpg-overview-divisions .lbfpg-card--division:hover .lbfpg-card__img img {
    transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   v29.38.14: Caption text was white-on-photo and unreadable.
   Change both the division-grid cards AND the title-holder cards
   to use dark purple text. Also tone down the dark overlay so the
   purple text reads against the photo.
   ───────────────────────────────────────────────────────────── */

/* Division cards (the six in overview-divisions) */
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption,
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption-eyebrow,
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption-title {
    color: #2e1f6e !important;
}

.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption-eyebrow {
    color: #4b3da3 !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.6) !important;
}

.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption-title {
    color: #2e1f6e !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.6) !important;
}

/* Soften the dark gradient overlay behind the caption text so purple
   reads cleanly */
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.55), transparent 60%) !important;
}

/* Title-holder cards (the people / contestants section) */
.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption,
.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption-eyebrow,
.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption-title,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption-eyebrow,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption-title {
    color: #2e1f6e !important;
}

.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption-eyebrow,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption-eyebrow {
    color: #4b3da3 !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.6) !important;
}

.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption-title,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption-title {
    color: #2e1f6e !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.6) !important;
}

.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__overlay,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.55), transparent 60%) !important;
}

/* ─────────────────────────────────────────────────────────────
   v29.38.15: Comprehensive readability pass. Line-by-line audit
   of the modal AND the card overlays. Every text element that
   was too light gets darkened to brand purple/slate.
   ───────────────────────────────────────────────────────────── */

/* MODAL — DIVISION / AGE GROUP labels in info cards
   (was #8f6a00 gold, unreadable on the white card bg) */
.lbfpg-modal .lbfpg-modal__info .label {
    color: #2e1f6e !important;
}

/* MODAL — ABOUT THIS DIVISION label
   (was #6b4bc6 light purple, too washed out) */
.lbfpg-modal .lbfpg-modal__bio .label {
    color: #2e1f6e !important;
}

/* MODAL — body paragraph
   (was #5f6b7a light gray, too soft against the panel) */
.lbfpg-modal .lbfpg-modal__bio p {
    color: #1e293b !important;
}

/* MODAL — AGES eyebrow at top
   (was #6b5fd6, bump to darker brand purple) */
.lbfpg-modal .lbfpg-modal__eyebrow {
    color: #2e1f6e !important;
}

/* MODAL — caption text overlaid on the modal photo
   (was white, unreadable against light parts of the photo) */
.lbfpg-modal .lbfpg-modal__caption,
.lbfpg-modal .lbfpg-modal__caption .eyebrow,
.lbfpg-modal .lbfpg-modal__caption .title {
    color: #2e1f6e !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.85), 0 0 8px rgba(255,255,255,0.7) !important;
}
.lbfpg-modal .lbfpg-modal__caption .eyebrow {
    color: #4b3da3 !important;
}

/* MODAL — soften the dark gradient behind the caption */
.lbfpg-modal .lbfpg-modal__hero:after {
    background: linear-gradient(to top, rgba(255,255,255,0.70), transparent 60%) !important;
}

/* CARD OVERLAYS (closed state) — make the caption text really dark.
   v29.38.14 used #2e1f6e + light text-shadow but it was still washed.
   Going darker and adding a stronger white halo. */
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption {
    color: #1a1043 !important;
}
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption-eyebrow {
    color: #2e1f6e !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,1) !important;
}
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__caption-title {
    color: #1a1043 !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,1) !important;
}
.lbfpg-overview-divisions .lbfpg-card--division .lbfpg-card__overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.78), rgba(255,255,255,0.2) 50%, transparent 70%) !important;
}

/* TITLE-HOLDER cards — same treatment */
.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption {
    color: #1a1043 !important;
}
.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption-eyebrow,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption-eyebrow {
    color: #2e1f6e !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,1) !important;
}
.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__caption-title,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__caption-title {
    color: #1a1043 !important;
    text-shadow: 0 1px 3px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,0.8), 0 0 2px rgba(255,255,255,1) !important;
}
.lbfpg-overview-titleholders .lbfpg-card .lbfpg-card__overlay,
.lbfpg-overview-judges .lbfpg-card .lbfpg-card__overlay {
    background: linear-gradient(to top, rgba(255,255,255,0.78), rgba(255,255,255,0.2) 50%, transparent 70%) !important;
}

/* ─────────────────────────────────────────────────────────────
   v29.38.16: User reports the lower-left modal caption text
   ("AGES X-Y" and division name overlaying the modal photo) is
   STILL too light. Going maximum-dark with a heavy white halo.
   Also adding a semi-opaque white background plate behind the
   text so it reads no matter what part of the photo is behind it.
   ───────────────────────────────────────────────────────────── */

/* The two lines of text in the bottom-left of the modal photo */
.lbfpg-modal .lbfpg-modal__caption {
    color: #000820 !important;
    background: rgba(255,255,255,0.85) !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 14px rgba(0,8,32,0.18) !important;
    max-width: calc(100% - 2rem) !important;
}

.lbfpg-modal .lbfpg-modal__caption .eyebrow {
    color: #2e1f6e !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

.lbfpg-modal .lbfpg-modal__caption .title {
    color: #000820 !important;
    text-shadow: none !important;
    font-weight: 900 !important;
}

/* Remove the dark gradient behind the caption since we now have a
   white plate doing the readability work */
.lbfpg-modal .lbfpg-modal__hero:after {
    background: transparent !important;
}