/* ====== BASE BANNER STYLE ====== */

.retro-banner {
    background: linear-gradient(#3A5C37, #274A2B); /* Inner green gradient */
    padding: 20px 40px;
    border-radius: 60px;
    border: 10px solid transparent;
    background-clip: padding-box;
    position: relative;
    display: inline-block;

    font-family: 'Montserrat', 'Avenir Next', 'Gotham', sans-serif;
    font-weight: 800;
    letter-spacing: 6px;

    /* Depth & curvature shadows */
    box-shadow:
        inset 0 5px 14px rgba(0,0,0,0.35),
        0 4px 10px rgba(0,0,0,0.4);
}

/* ====== GOLD BEZEL BORDER ====== */

.retro-banner::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 60px;

    background: linear-gradient(
        145deg,
        #F3E2AE 0%,   /* Light gold */
        #D7B96C 40%,  /* Mid gold */
        #9F7F36 85%   /* Dark gold */
    );

    z-index: -1;
}
/* ===== BASE RESPONSIVE BANNER ===== */

.retro-banner {
    background: linear-gradient(#3A5C37, #274A2B);
    padding: clamp(6px, vw, 28px) clamp(12px, 5vw, 70px); /* responsive padding - changes clamp2 from 24px, 6vw, 70px) and clamp1 (12px, 3vw, 28px)*/
    border-radius: clamp(25px, 6vw, 70px);
    border: clamp(6px, 1vw, 12px) solid transparent;
    background-clip: padding-box;
    position: relative;
    display: inline-block;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;

    font-family: 'Montserrat', 'Avenir Next', 'Gotham', sans-serif;
    font-weight: 800;
    letter-spacing: clamp(2px, 0.8vw, 8px); /* scales proportionally */

    box-shadow:
        inset 0 5px 14px rgba(0,0,0,0.35),
        0 4px 10px rgba(0,0,0,0.4);
}

.retro-banner::before {
    content: "";
    position: absolute;
    inset: calc(-1 * clamp(6px, 1vw, 12px));
    border-radius: inherit;

    background: linear-gradient(
        145deg,
        #F3E2AE 0%,
        #D7B96C 40%,
        #9F7F36 85%
    );

    z-index: -1;
}

/* ===== RESPONSIVE TEXT ===== */

.retro-banner span {
    color: #F2F2F2;
    font-size: clamp(20px, 5vw, 60px); /* REPLACES fixed size classes */
    text-shadow:
        0 3px 2px rgba(0,0,0,0.35),
        0 -1px 1px rgba(255,255,255,0.3);
    display: block;
    word-break: break-word;
}

/* OPTIONAL: Center banners on mobile */
.retro-banner {
    margin: 0 auto;
}

/* ====== TEXT STYLE ====== */

.retro-banner span {
    color: #F2F2F2; /* Slight off-white */
    text-shadow:
        0 3px 2px rgba(0,0,0,0.35),
        0 -1px 1px rgba(255,255,255,0.3);
}
@media (max-width: 600px) {
    .retro-banner {
        padding: 12px 20px;
    }
    .retro-banner span {
        letter-spacing: 2px;
    }
}


/* ============================
   BANNER SIZE PRESETS
   ============================ */

/* Small was padding: 10px 20px;
    font-size: 18px;
    border-radius: 30px; */
.size-small {
    padding: 10px 12px;
    font-size: 18px;
    border-radius: 20px;
}

/* Medium */
.size-medium {
    padding: 15px 30px;
    font-size: 28px;
    border-radius: 45px;
}

/* Large (close to your sample) */
.size-large {
    padding: 25px 60px;
    font-size: 48px;
    border-radius: 60px;
}

/* Extra-Large Wide Banner */
.size-xl {
    padding: 35px 80px;
    font-size: 60px;
    border-radius: 60px;
}