
/* ========== Allstars Discount Card ========== */
body:has(.asdc-page) main,
body:has(.asdc-page) .site-main,
body:has(.asdc-page) #content,
body:has(.asdc-page) .page-content,
body:has(.asdc-page) .entry-content,
body:has(.asdc-page) article.page,
body:has(.asdc-page) [data-elementor-type="wp-page"],
body:has(.asdc-page) .asdc-page{
    margin-top:0 !important;
    padding-top:0 !important;
    max-width:none !important;
}
.asdc-page{
    color:#FFFFFF;
    background:#000000;
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    margin:0;
    padding:0;
    position:relative;
    isolation:isolate;
}
.asdc-page::before{
    content:"";
    position:fixed;
    inset:0;
    background-image: url('https://allstarssportsbars20866.zapwp.com/q:i/r:0/wp:1/w:1/u:https://allstarssportsbars.co.uk/bristol/wp-content/uploads/sites/2/2026/04/BG_Red_Sparklestars.jpg');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0.45;
    pointer-events:none;
    z-index:-1;
}

/* Hero — background photo, with the two discount card images overlaid in the middle.
   ~20% shorter than the game / party-rooms / competitions heroes since the discount
   page has no big intro image to anchor the top of the page. */
.asdc-hero{
    position:relative;
    width:100%;
    height:min(691px, 68vh);
    min-height:464px;
    margin-top:-90px;
    background-color:#0a0a0a;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    z-index:5;
}
.asdc-hero__cards{
    display:flex;
    gap:24px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    max-width:1100px;
    padding:0 24px;
}
.asdc-hero__card{
    max-width:480px;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 24px 48px rgba(0,0,0,0.55));
}
.asdc-hero__cta{
    position:absolute;
    left:50%;
    bottom:-28px;
    transform:translateX(-50%);
    z-index:30;
}

/* Section wrapper */
.asdc-section{position:relative;background:transparent;background-image:radial-gradient(ellipse at top, rgba(197,51,34,0.18), transparent 60%);z-index:1;}
.asdc-section__inner{max-width:920px;margin:0 auto;padding:120px 24px 80px;}

/* Intro (title + card + sub) */
.asdc-intro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;margin-bottom:48px;}
.asdc-intro__title{
    font-family:'Rajdhani',"Rajdhani Fallback", sans-serif;
    font-weight:700;
    font-size:70px;
    line-height:0.8;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0;
}
.asdc-intro__card{
    max-width:280px;
    width:100%;
    height:auto;
    object-fit:contain;
    margin:0 auto;
    filter:drop-shadow(0 16px 32px rgba(0,0,0,0.45));
}
.asdc-intro__sub{
    font-family:'Rajdhani',"Rajdhani Fallback", sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:0.95;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0;
    max-width:820px;
}

/* Offers grid — clean 2-col layout matching the Figma. Cards need ~436px to fit
   the 70px headline + 32px sub on a single line; a 3-col layout cramps the typography
   so we stay 2-col on desktop and stack to 1-col on mobile. Orphan cards (e.g. the 5th
   discount card or 3rd student card) sit alone on their final row at 50% width, left-
   aligned — mirrors the Figma exactly. */
.asdc-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
    margin:0 0 32px 0;
    justify-content:start;
}

/* Offer card */
.asdc-offer{
    position:relative;
    overflow:hidden;
    min-height:329px;
    background:#0a0a0a;
    border:2px solid #4D5358;
    border-radius:15px;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    color:#FFFFFF;
    transition:transform .25s ease, border-color .25s ease;
}
.asdc-offer:hover{transform:translateY(-3px);border-color:#C53322;}
.asdc-offer__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.85) 100%);
    pointer-events:none;
}
.asdc-offer__inner{
    position:relative;
    z-index:1;
    padding:36px 40px;
    display:flex;
    flex-direction:column;
    gap:16px;
    height:100%;
    justify-content:center;
}
.asdc-offer__mini{
    margin:0;
    font-family:'Rajdhani',"Rajdhani Fallback", sans-serif;
    font-weight:700;
    font-size:24px;
    line-height:1.1;
    text-transform:uppercase;
    color:#FFFFFF;
    opacity:0.5;
    letter-spacing:0.3px;
}
.asdc-offer__head{
    margin:0;
    font-family:'Rajdhani',"Rajdhani Fallback", sans-serif;
    font-weight:700;
    font-size:70px;
    line-height:0.8;
    text-transform:uppercase;
    color:#FFFFFF;
}
.asdc-offer__sub{
    margin:0;
    font-family:'Rajdhani',"Rajdhani Fallback", sans-serif;
    font-weight:700;
    font-size:32px;
    line-height:0.95;
    text-transform:uppercase;
    color:#FFFFFF;
}
.asdc-offer__desc{
    margin:0;
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:400;
    font-size:16px;
    line-height:1.4;
    color:#FFFFFF;
}

/* Student section header */
.asdc-students-head{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    margin:40px 0 32px;
}
.asdc-students-head__card{
    max-width:480px;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 16px 32px rgba(0,0,0,0.45));
}
.asdc-students-head__intro{
    font-family:'Rajdhani',"Rajdhani Fallback", sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:0.95;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0;
}

/* Bottom CTA */
.asdc-cta{
    text-align:center;
    margin:60px auto 0;
    max-width:680px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}
.asdc-cta__title{
    font-family:'Rajdhani',"Rajdhani Fallback", sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:0.95;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0;
}
.asdc-cta__body{
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:1.4;
    color:#FFFFFF;
    margin:0;
}

/* Buttons */
.asdc-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:48px;
    padding:0 20px;
    border:2px solid #C53322;
    border-radius:10px;
    background:#C53322;
    color:#FFFFFF;
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:500;
    font-size:14px;
    line-height:1;
    letter-spacing:0.5px;
    text-transform:uppercase;
    text-decoration:none;
    transition:background-color .2s ease, color .2s ease, transform .2s ease;
}
a.asdc-btn{text-decoration:none !important;}
.asdc-btn--solid{background:#CE3827;border-color:#CE3827;}
.asdc-btn--solid:hover,
.asdc-btn--solid:focus-visible{background:#000000;border-color:#CE3827;color:#FFFFFF;outline:none;}
.asdc-btn--lg{height:56px;padding:0 32px;font-size:20px;border-radius:15px;}

/* Responsive */
@media (max-width: 1100px){
    .asdc-hero__card{max-width:360px;}
}
@media (max-width: 900px){
    .asdc-hero{height:min(560px, 60vh);min-height:380px;}
    /* The CTA is absolutely positioned with left:50%, so its shrink-to-fit
       width is capped at ~half the hero. On a phone that's too narrow for
       "CONTACT US" and it wraps to two lines. Force one line — translateX(-50%)
       keeps it centred no matter how wide it grows. */
    .asdc-hero__cta{white-space:nowrap;}
    .asdc-hero__cards{flex-direction:column;gap:16px;}
    .asdc-hero__card{max-width:280px;}
    .asdc-section__inner{padding:80px 16px 60px;}
    .asdc-intro__title{font-size:48px;}
    .asdc-intro__sub{font-size:28px;}
    .asdc-grid{grid-template-columns:1fr;}
    .asdc-offer__head{font-size:54px;}
    .asdc-offer__sub{font-size:26px;}
    .asdc-students-head__intro{font-size:28px;}
    .asdc-cta__title{font-size:28px;}
}
/*# sourceURL=allstars-discount-card-inline-css */
