/* ==========================================================================
   BDSTally Marketing Pages
   Styles for [bdstally_package_marketing] + [bdstally_other_packages].

   Conditionally enqueued — loaded only on pages containing the marketing
   shortcode. Reuses tokens from bdstally.css (--bds-*).
   ========================================================================== */

/* ── Root container ──────────────────────────────────────────────────────── */
.bds-mkt {
    padding: var(--bds-space-2xl) 0 var(--bds-space-3xl);
    color: var(--bds-color-text);
    overflow-x: hidden;
}
.bds-mkt *,
.bds-mkt *::before,
.bds-mkt *::after { box-sizing: border-box; }
.bds-mkt img { max-width: 100%; height: auto; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.bds-mkt__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bds-space-xl);
    align-items: center;
    margin-bottom: var(--bds-space-2xl);
}
@media (min-width: 860px) {
    .bds-mkt__hero {
        grid-template-columns: 1.15fr 1fr;
        gap: var(--bds-space-2xl);
    }
}

.bds-mkt__headline {
    font-family: var(--bds-font-display);
    font-size: clamp(1.85rem, 4.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--bds-color-primary);
    margin: 0 0 var(--bds-space-md);
    letter-spacing: -0.01em;
}

.bds-mkt__subhead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.55;
    color: var(--bds-color-text-muted);
    margin: 0 0 var(--bds-space-lg);
    max-width: 56ch;
}

.bds-mkt__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--bds-space-sm);
}
.bds-mkt__bullets li {
    position: relative;
    padding-left: 1.85rem;
    line-height: 1.45;
    color: var(--bds-color-text);
    font-size: 1.02rem;
}
.bds-mkt__bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.30rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background:
        linear-gradient(135deg, var(--bds-color-cyan) 0%, var(--bds-color-cyan-dark) 100%);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--bds-color-cyan) 0%, var(--bds-color-cyan-dark) 100%);
    background-size: 0.85rem 0.85rem, 100% 100%;
    background-repeat: no-repeat;
    background-position: center, center;
}

/* Container fits the image — no fixed aspect ratio. Whatever Brian uploads
   (4:3, 16:9, square, portrait) gets shown at its natural ratio scaled to
   the column width, with no letterboxing/background bleed. */
.bds-mkt__hero-img-wrap {
    border-radius: var(--bds-border-radius-lg);
    overflow: hidden;
    box-shadow: var(--bds-shadow-lg);
}
.bds-mkt__hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Main 2-col grid ─────────────────────────────────────────────────────── */
.bds-mkt__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bds-space-2xl);
    align-items: start;
}
@media (min-width: 980px) {
    .bds-mkt__main {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--bds-space-2xl);
    }
}

.bds-mkt__content {
    display: grid;
    gap: var(--bds-space-2xl);
    min-width: 0; /* allow shrinking inside grid */
}

.bds-mkt__sidebar { min-width: 0; }
.bds-mkt__sidebar-sticky { position: relative; }
@media (min-width: 980px) {
    .bds-mkt__sidebar-sticky {
        position: sticky;
        top: calc(var(--bds-header-height) + var(--bds-space-md));
    }
}

/* Dark navy panel that hosts the .bds-avail-card on marketing pages. The
   homepage version of the card relies on a dark hero photo behind it for
   the glassmorphism to read. On a white marketing page we provide that
   dark context ourselves so the SAME card markup renders identically. */
.bds-mkt__avail-panel {
    background: linear-gradient(155deg, var(--bds-color-primary) 0%, var(--bds-color-primary-mid) 100%);
    border-radius: var(--bds-border-radius-lg);
    padding: var(--bds-space-lg);
    box-shadow: var(--bds-shadow-lg);
    /* Subtle cyan glow on the top edge — visual nod to brand */
    position: relative;
    overflow: hidden;
}
.bds-mkt__avail-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--bds-color-cyan) 50%,
        transparent 100%);
    opacity: .55;
    pointer-events: none;
}

/* ── Buy cards ───────────────────────────────────────────────────────────── */
.bds-mkt__buys {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bds-space-md);
}
/* Single-variant pages (Teen / Adult / DMV) — cap the lone Buy card at a
   "normal" width so it doesn't stretch full-column like a banner. Roughly
   matches the visual weight of a single card in a 2-up or 3-up grid. */
.bds-mkt__buys[data-count="1"] { max-width: 320px; }
.bds-mkt__buys[data-count="2"] { grid-template-columns: 1fr; }
.bds-mkt__buys[data-count="3"] { grid-template-columns: 1fr; }
@media (min-width: 620px) {
    .bds-mkt__buys[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
    .bds-mkt__buys[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}

.bds-mkt__buy {
    background: var(--bds-color-white);
    border: 1px solid var(--bds-color-light-gray);
    border-radius: var(--bds-border-radius-lg);
    padding: var(--bds-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--bds-space-sm);
    box-shadow: var(--bds-shadow-sm);
    transition: transform var(--bds-transition), box-shadow var(--bds-transition);
}
.bds-mkt__buy:hover {
    transform: translateY(-2px);
    box-shadow: var(--bds-shadow-md);
}
.bds-mkt__buy-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bds-color-primary);
    line-height: 1.25;
}
.bds-mkt__buy-meta {
    font-size: 0.9rem;
    color: var(--bds-color-text-muted);
}
.bds-mkt__buy-price {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--bds-color-primary);
    letter-spacing: -0.01em;
    margin-top: var(--bds-space-xs);
    line-height: 1.15;
}
/* Per-hour parenthetical — shown only for standard bundle packages
   (skipped for Guaranteed and DMV). Thinner + smaller so the headline
   price still dominates the visual hierarchy. */
.bds-mkt__buy-perhour {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--bds-color-text-muted);
    letter-spacing: 0;
    white-space: nowrap;
}
.bds-mkt__buy-cta {
    margin-top: auto;
}

/* ── Body copy ───────────────────────────────────────────────────────────── */
.bds-mkt__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--bds-color-text);
    max-width: 68ch;
}
.bds-mkt__body h2,
.bds-mkt__body h3 {
    font-family: var(--bds-font-display);
    color: var(--bds-color-primary);
    margin: var(--bds-space-xl) 0 var(--bds-space-sm);
    line-height: 1.25;
}
.bds-mkt__body h2 { font-size: 1.6rem; font-weight: 700; }
.bds-mkt__body h3 { font-size: 1.25rem; font-weight: 700; }
.bds-mkt__body p { margin: 0 0 var(--bds-space-md); }
.bds-mkt__body ul,
.bds-mkt__body ol { margin: 0 0 var(--bds-space-md) 1.25rem; padding: 0; }
.bds-mkt__body li { margin: var(--bds-space-xs) 0; }
.bds-mkt__body a { color: var(--bds-color-cyan-dark); text-decoration: underline; text-underline-offset: 2px; }
.bds-mkt__body a:hover { color: var(--bds-color-accent); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.bds-mkt__faq-title {
    font-family: var(--bds-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bds-color-primary);
    margin: 0 0 var(--bds-space-md);
}
.bds-mkt__faq-item {
    border: 1px solid var(--bds-color-light-gray);
    border-radius: var(--bds-border-radius);
    background: var(--bds-color-white);
    margin-bottom: var(--bds-space-sm);
    overflow: hidden;
}
.bds-mkt__faq-q {
    list-style: none;
    cursor: pointer;
    padding: var(--bds-space-md) var(--bds-space-lg);
    font-weight: 600;
    color: var(--bds-color-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bds-space-md);
    transition: background var(--bds-transition);
}
.bds-mkt__faq-q::-webkit-details-marker { display: none; }
.bds-mkt__faq-q:hover { background: var(--bds-color-off-white); }
.bds-mkt__faq-chev {
    transition: transform var(--bds-transition);
    color: var(--bds-color-mid-gray);
    flex-shrink: 0;
}
.bds-mkt__faq-item[open] .bds-mkt__faq-chev { transform: rotate(-180deg); }
.bds-mkt__faq-a {
    padding: 0 var(--bds-space-lg) var(--bds-space-md);
    color: var(--bds-color-text);
    line-height: 1.6;
}
.bds-mkt__faq-a p { margin: 0 0 var(--bds-space-sm); }
.bds-mkt__faq-a p:last-child { margin-bottom: 0; }

/* ── Related packages (escape hatch) ─────────────────────────────────────── */
.bds-mkt-related {
    margin-top: var(--bds-space-3xl);
    padding-top: var(--bds-space-2xl);
    border-top: 1px solid var(--bds-color-light-gray);
}
.bds-mkt-related__title {
    font-family: var(--bds-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bds-color-primary);
    margin: 0 0 var(--bds-space-lg);
    text-align: center;
}
.bds-mkt-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bds-space-md);
}
@media (min-width: 560px) {
    .bds-mkt-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 880px) {
    .bds-mkt-related__grid { grid-template-columns: repeat(3, 1fr); }
}

.bds-mkt-related__card {
    position: relative;
    display: block;
    padding: var(--bds-space-md) var(--bds-space-lg);
    padding-right: 2.5rem;
    background: var(--bds-color-white);
    border: 1px solid var(--bds-color-light-gray);
    border-radius: var(--bds-border-radius);
    color: var(--bds-color-text);
    text-decoration: none;
    transition: border-color var(--bds-transition), transform var(--bds-transition), box-shadow var(--bds-transition);
    box-shadow: var(--bds-shadow-sm);
}
.bds-mkt-related__card:hover {
    border-color: var(--bds-color-cyan);
    transform: translateY(-1px);
    box-shadow: var(--bds-shadow-md);
    text-decoration: none;
}
.bds-mkt-related__card-headline {
    font-weight: 700;
    color: var(--bds-color-primary);
    font-size: 1.02rem;
    line-height: 1.25;
    margin-bottom: var(--bds-space-xs);
}
.bds-mkt-related__card-tagline {
    color: var(--bds-color-text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}
.bds-mkt-related__card-arrow {
    position: absolute;
    right: var(--bds-space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--bds-color-cyan);
    font-size: 1.25rem;
    font-weight: 700;
    transition: transform var(--bds-transition);
}
.bds-mkt-related__card:hover .bds-mkt-related__card-arrow {
    transform: translateY(-50%) translateX(3px);
    color: var(--bds-color-accent);
}