/**
 * Summer Savings campaign landing page — Sierra "Summer of Savings" clone.
 *
 * Ported from sierraair.com's summer-campaign.css, scoped under
 * .mnm-coupons / .sa-summer-campaign (no global bleed) and re-mapped to the
 * local theme fonts:
 *   headings / display -> var(--font-heading)  (Bebas Neue)
 *   body / labels / UI  -> var(--font-body)     (Source Sans 3)
 * Sierra's exact colors, gradients, hero layout (bg image + bottom-anchored
 * foreground art), ticket cards, and trust pillars are preserved. Font-awesome
 * <i> rules are adapted to the theme's inline-SVG .fa-icon (sized by font-size,
 * colored by currentColor). Loaded only for template-coupons.php.
 *
 * @package MNM_Theme
 */

.sa-summer-campaign {
    /* Brand */
    --ss-blue: #0051a3;
    --ss-blue-dark: #003366;
    --ss-red: #ee3a44;
    --ss-red-hover: #d63238;

    /* Summer accents (from hero artwork) */
    --ss-orange: #f5870a;
    --ss-amber: #f59e0b;
    --ss-yellow: #fcc419;

    /* Neutrals */
    --ss-ink: #0f2942;
    --ss-slate: #475569;
    --ss-cream: #fffaf0;
    --ss-line: #e7e2d6;
    --ss-white: #ffffff;

    --ss-radius: 18px;
    --ss-radius-sm: 12px;
    --ss-shadow: 0 18px 45px rgba(15, 41, 66, 0.16);
    --ss-shadow-sm: 0 8px 24px rgba(15, 41, 66, 0.1);
    --ss-container: 1180px;
    --ss-ease: 0.25s ease;

    font-family: var(--font-body);
    color: var(--ss-ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.sa-summer-campaign * { box-sizing: border-box; }

.sa-summer-container {
    width: 100%;
    max-width: var(--ss-container);
    margin: 0 auto;
    padding: 30px 24px 0;
}

/* ---- Shared type ------------------------------------------------------- */
.sa-summer-campaign .sa-summer-h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5.5vw, 5.05rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ss-blue-dark);
    text-transform: uppercase;
}

.sa-summer-campaign .sa-summer-h2 {
    margin: 12px 0 0;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ss-blue-dark);
    text-transform: uppercase;
}

.sa-summer-lead {
    margin: 18px 0 0;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.55;
    color: var(--ss-slate);
    max-width: 42ch;
}

/* ---- Eyebrow / pill label --------------------------------------------- */
.sa-summer-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--ss-orange), var(--ss-amber));
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sa-summer-eyebrow .fa-icon { font-size: 0.95em; }
.sa-summer-eyebrow--center { align-self: center; margin: 0 auto; }

.sa-summer-section-head {
    text-align: center;
    margin-bottom: 44px;
}

/* ---- Buttons ----------------------------------------------------------- */
.sa-summer-campaign .sa-summer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 9999px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--ss-ease), background-color var(--ss-ease), color var(--ss-ease), box-shadow var(--ss-ease);
}

.sa-summer-campaign .sa-summer-btn--call {
    background: var(--ss-red);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(238, 58, 68, 0.32);
}

.sa-summer-campaign .sa-summer-btn--call:hover {
    background: var(--ss-red-hover);
    color: #ffffff;
    transform: translateY(-2px);
}

.sa-summer-campaign .sa-summer-btn--block { width: 100%; }

/* ==========================================================================
   HERO
   ========================================================================== */
.sa-summer-hero {
    position: relative;
    background-color: var(--ss-amber);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* 50px breathing room below the bottom-anchored foreground art / copy. */
    padding: clamp(12px, 2.5vw, 32px) 0 50px;
}

.sa-summer-hero .sa-summer-container {
    max-width: 1280px;
    padding-top: 8px;
}

.sa-summer-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
    gap: 40px;
}

/* Copy block sits on the right (order 2); art on the left (order 1). */
.sa-summer-hero-card {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sa-summer-hero-card .sa-summer-eyebrow { margin-bottom: 18px; }

/* White hero copy with drop shadows for legibility on the artwork. */
.sa-summer-campaign .sa-summer-hero .sa-summer-h1 {
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(15, 41, 66, 0.45), 0 1px 2px rgba(15, 41, 66, 0.55);
}

.sa-summer-hero .sa-summer-lead {
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(15, 41, 66, 0.45);
}

.sa-summer-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.sa-summer-hero-art {
    order: 1;
    position: relative;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* anchor the art to the bottom of the section */
}

.sa-summer-hero-art img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    margin-bottom: 0;
    filter: drop-shadow(0 8px 9px rgba(15, 41, 66, 0.3));
}

/* Ground shadow so the art reads as anchored. */
.sa-summer-hero-art::after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 400px);
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(15, 41, 66, 0.45) 0%, rgba(15, 41, 66, 0) 72%);
    filter: blur(3px);
}

/* ==========================================================================
   OFFERS
   ========================================================================== */
.sa-summer-offers {
    background: var(--ss-cream);
    padding: clamp(56px, 8vw, 20px) 0;
}

.sa-summer-offer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.sa-summer-offer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--ss-white);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow-sm);
    padding: 40px 28px 32px;
    transition: transform var(--ss-ease), box-shadow var(--ss-ease);
}

.sa-summer-offer:hover {
    transform: translateY(-4px);
    box-shadow: var(--ss-shadow);
}

/* Coupon ticket notches */
.sa-summer-offer::before,
.sa-summer-offer::after {
    content: "";
    position: absolute;
    bottom: 86px;
    width: 22px;
    height: 22px;
    background: var(--ss-cream);
    border: 1px solid var(--ss-line);
    border-radius: 50%;
}

.sa-summer-offer::before { left: -12px; }
.sa-summer-offer::after { right: -12px; }

.sa-summer-offer-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(140deg, var(--ss-orange), var(--ss-yellow));
    color: #ffffff;
    font-size: 1.7rem;
    box-shadow: 0 8px 18px rgba(245, 135, 10, 0.32);
}

.sa-summer-campaign .sa-summer-offer-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ss-blue-dark);
}

.sa-summer-offer-detail {
    margin: 8px 0 0;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--ss-slate);
}

.sa-summer-offer-cut {
    display: block;
    width: 100%;
    margin: 22px 0;
    border-top: 2px dashed var(--ss-line);
}

.sa-summer-offer .sa-summer-btn { margin-top: auto; }

.sa-summer-disclaimer {
    max-width: 880px;
    margin: 40px auto 0;
    text-align: center;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #8a8576;
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.sa-summer-why {
    background: var(--ss-white);
    padding: clamp(56px, 8vw, 90px) 0;
}

.sa-summer-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.sa-summer-feature {
    text-align: center;
    padding: 8px;
}

.sa-summer-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 16px;
    background: rgba(0, 81, 163, 0.08);
    color: var(--ss-blue);
    font-size: 1.5rem;
}

.sa-summer-campaign .sa-summer-feature h4 {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ss-blue-dark);
}

.sa-summer-feature p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--ss-slate);
}

/* ==========================================================================
   Inline-SVG icon integration (.fa-icon scales by font-size, fill currentColor)
   ========================================================================== */
.sa-summer-offer-badge .fa-icon,
.sa-summer-feature-icon .fa-icon {
    font-size: 1em;
    color: inherit;
}

.sa-summer-campaign .sa-summer-btn .fa-icon { font-size: 1em; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
    /* Stacked: art on top, restore bottom spacing under the copy. */
    .sa-summer-hero { padding-bottom: clamp(40px, 7vw, 80px); }
    .sa-summer-hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .sa-summer-hero-art { order: -1; align-items: center; }
    .sa-summer-hero-art img { max-width: 360px; }
    .sa-summer-offer-grid { grid-template-columns: repeat(2, 1fr); }
    .sa-summer-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
}

@media (max-width: 600px) {
    .sa-summer-container { padding: 30px 18px 0; }
    .sa-summer-offer-grid { grid-template-columns: 1fr; }
    .sa-summer-hero-cta { flex-direction: column; }
    .sa-summer-hero-cta .sa-summer-btn { width: 100%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sa-summer-campaign * { transition: none !important; }
    .sa-summer-offer:hover,
    .sa-summer-campaign .sa-summer-btn:hover { transform: none; }
}