/*=========================================================
  MaryJo Buzzanco Fine Art
  classes.css
=========================================================*/

/*=========================================================
  VARIABLES
=========================================================*/

:root{

    --primary:#264653;
    --secondary:#2A9D8F;
    --accent:#E9C46A;
    --accent-dark:#D4A63D;

    --background:#faf9f7;
    --surface:#ffffff;

    --text:#2b2b2b;
    --muted:#666666;

    --border:#e5e5e5;

    --shadow:

        0 10px 30px rgba(0,0,0,.08);

    --radius:18px;

    --max-width:1300px;

}

/*=========================================================
  RESET
=========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:

        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.7;

}

img{

    display:block;

    width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

}

section{

    padding:

        5rem 2rem;

}

.section-header{

    max-width:700px;

    margin:

        0 auto 3rem;

    text-align:center;

}

.section-header span{

    display:inline-block;

    color:var(--secondary);

    font-size:.9rem;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:1rem;

}

.section-header h2{

    font-size:

        clamp(2rem,4vw,3rem);

    color:var(--primary);

    margin-bottom:1rem;

}

.section-header p{

    color:var(--muted);

    font-size:1.05rem;

}

/*=========================================================
  HERO
=========================================================*/

.classes-hero{

    min-height:85vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:8rem 2rem;

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(

            rgba(38,70,83,.65),

            rgba(38,70,83,.65)

        ),

        url("../images/classes-hero.jpg")

        center center / cover

        no-repeat;

}

.hero-overlay{

    max-width:850px;

    color:white;

}

.hero-overlay h1{

    font-size:

        clamp(3rem,7vw,5rem);

    margin:1rem 0;

    font-weight:700;

}

.hero-overlay h2{

    font-size:

        clamp(1.2rem,3vw,2rem);

    color:var(--accent);

    margin-bottom:2rem;

    font-weight:400;

}

.hero-overlay p{

    font-size:1.15rem;

    max-width:700px;

    margin:0 auto 2.5rem;

}

.section-tag{

    display:inline-block;

    padding:

        .45rem 1rem;

    border-radius:999px;

    background:

        rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

    letter-spacing:2px;

    font-size:.8rem;

    text-transform:uppercase;

    font-weight:700;

}

/*=========================================================
  BUTTONS
=========================================================*/

.hero-buttons{

    display:flex;

    gap:1rem;

    justify-content:center;

    flex-wrap:wrap;

    margin-top:2rem;

}

.hero-button{

    display:inline-block;

    padding:1rem 2rem;

    border-radius:999px;

    background:var(--secondary);

    color:white;

    font-weight:600;

    transition:.3s;

    box-shadow:var(--shadow);

}

.hero-button:hover{

    background:var(--accent-dark);

    transform:translateY(-4px);

}

.hero-button.secondary{

    background:transparent;

    border:2px solid white;

}

.hero-button.secondary:hover{

    background:white;

    color:var(--primary);

}

/*=========================================================
  FEATURES
=========================================================*/

.features{

    max-width:var(--max-width);

    margin:auto;

}

.feature-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(240px,1fr));

    gap:2rem;

}

.feature-card{

    background:var(--surface);

    padding:2.5rem;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:.3s;

    text-align:center;

}

.feature-card:hover{

    transform:translateY(-8px);

}

.feature-icon{

    font-size:3rem;

    margin-bottom:1rem;

}

.feature-card h3{

    color:var(--primary);

    margin-bottom:1rem;

}

.feature-card p{

    color:var(--muted);

}

/*=========================================================
  SPLIT SECTION
=========================================================*/

.split-section{

    max-width:var(--max-width);

    margin:auto;

    display:grid;

    grid-template-columns:

        1fr 1fr;

    gap:5rem;

    align-items:center;

}

.split-image img{

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.split-content h2{

    font-size:clamp(2rem,4vw,3rem);

    color:var(--primary);

    margin:1rem 0;

}

.split-content p{

    color:var(--muted);

    margin-bottom:1.5rem;

}

/*=========================================================
  CLASS OPTIONS
=========================================================*/

.class-options{

    background:white;

}

.options-grid{

    max-width:var(--max-width);

    margin:auto;

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(280px,1fr));

    gap:2rem;

}

.option-card{

    background:var(--background);

    border-radius:var(--radius);

    padding:2.5rem;

    transition:.3s;

    box-shadow:var(--shadow);

}

.option-card:hover{

    transform:translateY(-8px);

}

.option-icon{

    font-size:2.5rem;

    margin-bottom:1rem;

}

.option-card h3{

    color:var(--primary);

    margin-bottom:1rem;

}

.option-card p{

    color:var(--muted);

    line-height:1.8;

}

/*=========================================================
  PRICING
=========================================================*/

.pricing-section{

    background:linear-gradient(

        180deg,

        #ffffff,

        #f6f8f9

    );

}

.pricing-grid{

    max-width:var(--max-width);

    margin:auto;

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(300px,1fr));

    gap:2rem;

}

.pricing-card{

    background:white;

    border-radius:var(--radius);

    padding:3rem 2rem;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

    border:2px solid transparent;

}

.pricing-card:hover{

    transform:translateY(-10px);

    border-color:var(--secondary);

}

.pricing-card.featured{

    border-color:var(--accent);

    transform:scale(1.03);

}

.pricing-card h3{

    color:var(--primary);

    margin-bottom:1rem;

}

.price{

    font-size:3rem;

    font-weight:700;

    color:var(--secondary);

    margin:1rem 0;

}

.price span{

    font-size:1rem;

    color:var(--muted);

}

.pricing-card ul{

    list-style:none;

    margin-top:2rem;

}

.pricing-card li{

    padding:.65rem 0;

    border-bottom:1px solid var(--border);

}

/*=========================================================
  BOOKING
=========================================================*/

.booking-section{

    background:

        linear-gradient(

            rgba(38,70,83,.92),

            rgba(38,70,83,.92)

        ),

        url("../images/paint-background.jpg")

        center/cover

        no-repeat;

    color:white;

    text-align:center;

}

.booking-content{

    max-width:850px;

    margin:auto;

}

.booking-content h2{

    font-size:clamp(2.5rem,5vw,4rem);

    margin:1rem 0 2rem;

}

.booking-content p{

    font-size:1.15rem;

    margin-bottom:1.5rem;

}

/*=========================================================
  CONTACT FORM
=========================================================*/

.contact-section{

    background:white;

}

.booking-form{

    max-width:900px;

    margin:auto;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1.5rem;

    margin-bottom:1.5rem;

}

.booking-form input,

.booking-form select,

.booking-form textarea{

    width:100%;

    padding:1rem 1.2rem;

    border-radius:12px;

    border:1px solid var(--border);

    font-size:1rem;

    transition:.3s;

}

.booking-form textarea{

    margin-bottom:2rem;

    resize:vertical;

}

.booking-form input:focus,

.booking-form select:focus,

.booking-form textarea:focus{

    outline:none;

    border-color:var(--secondary);

    box-shadow:

        0 0 0 4px rgba(42,157,143,.15);

}

/*=========================================================
  CALENDAR PREVIEW
=========================================================*/

.calendar-preview{

    background:#f8fafb;

}

.calendar-card{

    max-width:900px;

    margin:auto;

    background:white;

    padding:3rem;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);

}

.calendar-card p{

    color:var(--muted);

    margin-bottom:2rem;

}

.calendar-legend{

    display:flex;

    justify-content:center;

    gap:2rem;

    flex-wrap:wrap;

}

.calendar-legend div{

    display:flex;

    align-items:center;

    gap:.5rem;

    font-weight:600;

}

.available-dot,

.limited-dot,

.booked-dot,

.public-dot{

    width:16px;

    height:16px;

    border-radius:50%;

    display:inline-block;

}

.available-dot{

    background:#4CAF50;

}

.limited-dot{

    background:#FFC107;

}

.booked-dot{

    background:#F44336;

}

.public-dot{

    background:#2196F3;

}

/*=========================================================
  FAQ
=========================================================*/

.faq-section{

    background:white;

}

.faq-grid{

    max-width:var(--max-width);

    margin:auto;

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(320px,1fr));

    gap:2rem;

}

.faq-card{

    background:var(--background);

    border-radius:var(--radius);

    padding:2rem;

    box-shadow:var(--shadow);

    transition:.3s;

}

.faq-card:hover{

    transform:translateY(-6px);

}

.faq-card h3{

    color:var(--primary);

    margin-bottom:1rem;

}

.faq-card p{

    color:var(--muted);

}

/*=========================================================
  CTA
=========================================================*/

.cta-section{

    background:linear-gradient(

        135deg,

        var(--secondary),

        var(--primary)

    );

    color:white;

    text-align:center;

}

.cta-content{

    max-width:850px;

    margin:auto;

}

.cta-content h2{

    font-size:clamp(2.5rem,5vw,4rem);

    margin:1rem 0 2rem;

}

.cta-content p{

    font-size:1.15rem;

    margin-bottom:2rem;

}

/*=========================================================
  FOOTER
=========================================================*/

.site-footer{

    background:#1f2d3d;

    color:white;

    padding:4rem 2rem;

    text-align:center;

}

.footer-content{

    max-width:900px;

    margin:auto;

}

.footer-content h3{

    font-size:2rem;

    margin-bottom:1rem;

}

.footer-content p{

    color:rgba(255,255,255,.8);

    margin-bottom:2rem;

}

.social-links{

    display:flex;

    justify-content:center;

    gap:1rem;

    flex-wrap:wrap;

    margin-bottom:2rem;

}

.social-links a{

    padding:.85rem 1.75rem;

    border:2px solid rgba(255,255,255,.2);

    border-radius:999px;

    transition:.3s;

    color:white;

}

.social-links a:hover{

    background:var(--secondary);

    border-color:var(--secondary);

}

.copyright{

    color:rgba(255,255,255,.6);

    font-size:.9rem;

}

/*=========================================================
  IMAGE STYLING
=========================================================*/

.split-image{

    overflow:hidden;

    border-radius:var(--radius);

}

.split-image img{

    transition:transform .5s ease;

}

.split-image:hover img{

    transform:scale(1.05);

}

/*=========================================================
  SUBTLE SECTION SEPARATION
=========================================================*/

.features,
.class-options,
.pricing-section,
.contact-section,
.faq-section{

    position:relative;

}

.features::after,
.class-options::after,
.pricing-section::after{

    content:"";

    display:block;

    width:120px;

    height:4px;

    margin:4rem auto 0;

    border-radius:999px;

    background:linear-gradient(
        to right,
        var(--secondary),
        var(--accent)
    );

}

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

@media (max-width:1024px){

    .split-section{

        grid-template-columns:1fr;

        gap:3rem;

    }

}

@media (max-width:768px){

    section{

        padding:4rem 1.25rem;

    }

    .hero-overlay h1{

        font-size:3rem;

    }

    .hero-overlay h2{

        font-size:1.4rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-button{

        width:100%;

        max-width:320px;

        text-align:center;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .calendar-legend{

        flex-direction:column;

        align-items:flex-start;

        gap:1rem;

    }

}

@media (max-width:480px){

    .feature-card,

    .option-card,

    .pricing-card,

    .faq-card,

    .calendar-card{

        padding:1.5rem;

    }

    .price{

        font-size:2.3rem;

    }

    .section-header h2{

        font-size:2rem;

    }

    .booking-content h2,

    .cta-content h2{

        font-size:2.2rem;

    }

}

/*=========================================================
  SELECTED DATE
=========================================================*/

.selected-date-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    background: #eef8f6;

    border-left: 6px solid var(--primary);

    border-radius: var(--radius);

    padding: 30px;

    margin-bottom: 40px;

    box-shadow: var(--shadow);

}

.selected-date-icon {

    font-size: 3rem;

}

.selected-date-content {

    flex: 1;

}

.selected-date-content h3 {

    margin: 0 0 8px;

    color: var(--primary-dark);

}

.selected-date-content p {

    margin: 0;

    font-size: 1.2rem;

    font-weight: 600;

}

.selected-date-content small {

    display: block;

    margin-top: 8px;

    color: #666;

}

@media (max-width:700px) {

    .selected-date-card {

        flex-direction: column;

        text-align: center;

    }

}