/* ======================================================================
   Front Hero — Cohort 1 (Amber Oud — perfume boutique)
   Extracted standalone hero section (was front/template-1 inline hero).
   Bootstrap-first: row+col, btn, ratio. Carries the hero polish only —
   gradient overlays, image fallback, hover micro-motion, caption typography.
   Class pattern: front-hero-1-{element}.
   ====================================================================== */

/* ---------- Section spacing rhythm ---------- */
.front-hero-1 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* ---------- Banner cards ---------- */
.front-hero-1-primary,
.front-hero-1-secondary {
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
    box-shadow: 0 6px 16px rgba(var(--bs-body-color-rgb), 0.06);
    background-color: var(--bs-primary, var(--bs-link-color));  /* fallback when image is missing */
}

.front-hero-1-primary:hover,
.front-hero-1-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(var(--bs-body-color-rgb), 0.18);
}

.front-hero-1-primary {
    aspect-ratio: 16 / 11;
    min-height: 360px;
}
.front-hero-1-secondary {
    aspect-ratio: 4 / 3;
    min-height: 180px;
}

@media (min-width: 992px) {
    .front-hero-1-primary { aspect-ratio: auto; min-height: 520px; }
    .front-hero-1-secondary { aspect-ratio: auto; min-height: 252px; }
}

.front-hero-1-primary img,
.front-hero-1-secondary img {
    transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.front-hero-1-primary:hover img,
.front-hero-1-secondary:hover img {
    transform: scale(1.04);
}

/* Gradient overlay — readable text over images, falls back to solid when no image */
.front-hero-1-primary::after,
.front-hero-1-secondary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(var(--bs-body-color-rgb), 0.05) 0%,
        rgba(var(--bs-body-color-rgb), 0.55) 60%,
        rgba(var(--bs-body-color-rgb), 0.85) 100%);
    pointer-events: none;
}

.front-hero-1-primary-caption,
.front-hero-1-secondary-caption {
    z-index: 1;
    max-width: 90%;
}

.front-hero-1-eyebrow {
    backdrop-filter: blur(6px);
    background: rgba(var(--bs-body-bg-rgb), 0.18) !important;
    border: 1px solid rgba(var(--bs-body-bg-rgb), 0.32);
}

.front-hero-1-title,
.front-hero-1-secondary-title {
    color: var(--bs-body-bg) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
}
.front-hero-1-title {
    font-family: var(--bs-heading-font-family, inherit);
    letter-spacing: -0.02em;
}
.front-hero-1-title em {
    font-style: italic;
    color: var(--bs-secondary, var(--bs-warning)) !important;
    font-weight: 400;
    -webkit-text-fill-color: var(--bs-secondary, var(--bs-warning));
}
.front-hero-1-sub {
    color: rgba(var(--bs-body-bg-rgb), 0.92) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.front-hero-1-cta {
    border-radius: 999px;
    padding-inline: 28px;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, background 0.2s ease;
}
.front-hero-1-cta:hover { transform: translateY(-2px); }

.front-hero-1-secondary-title {
    font-family: var(--bs-heading-font-family, inherit);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}