/* ==========================================================================
   VELORA FITNESS — DESKTOP STYLESHEET
   min-width media queries only — layered on top of mobile.css (the base).
   Breakpoints: 768px (tablet), 1024px (desktop nav switch), 1280px (full desktop)
   ========================================================================== */


/* --------------------------------------------------------------------------
   TABLET — 768px and up
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {

    :root {
        --container-padding: var(--space-4);
    }

    h1 {
        font-size: 2.75rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* Features — tablet 2-column grid */
    .features__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Membership — tablet 2-column grid */
    .membership__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Programs — tablet 2-column grid */
    .programs__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Gallery — tablet 2-column grid (simple, masonry kicks in at desktop) */
    .gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* --------------------------------------------------------------------------
   DESKTOP — 1024px and up
   Nav switches from hamburger to full horizontal layout here.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    h1 {
        font-size: 3.25rem;
    }

    h2 {
        font-size: 2.5rem;
    }


    /* Navigation — desktop layout */
    .site-nav__links {
        display: block;
    }

    .site-nav__links ul {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .site-nav__links a {
        font-family: var(--font-heading);
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--color-white);
        position: relative;
        padding-block: var(--space-1);
        transition: color var(--duration) var(--ease);
    }

    /* Underline hover effect */
    .site-nav__links a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0;
        height: 2px;
        background-color: var(--color-accent);
        transition: width var(--duration) var(--ease);
    }

    .site-nav__links a:hover {
        color: var(--color-accent);
    }

    .site-nav__links a:hover::after {
        width: 100%;
    }

    /* Active page indicator */
    .site-nav__links a[aria-current="page"] {
        color: var(--color-accent);
    }

    .site-nav__cta {
        display: inline-flex;
    }

    /* Hamburger no longer needed on desktop */
    .site-nav__toggle {
        display: none;
    }

    /* Mobile drawer should never render on desktop, even if it was left
       open from a smaller screen (e.g. resizing the browser window) */
    .mobile-menu {
        display: none !important;
    }


    /* Hero — desktop refinements */
    .hero__content {
        text-align: left;
    }

    .hero__title {
        font-size: 4rem;
    }

    .hero__subtitle {
        font-size: 1.25rem;
        max-width: 560px;
        margin-inline: 0;
    }

    .hero__actions {
        flex-direction: row;
        max-width: none;
        margin-inline: 0;
    }

    .hero__actions .btn {
        width: auto;
        padding-inline: var(--space-5);
    }

}


/* --------------------------------------------------------------------------
   PARTNER LOGOS — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .partners {
        padding-block: var(--space-10);
    }

    .partners__list {
        gap: var(--space-10);
    }

    .partners__item img {
        height: 32px;
    }

}


/* --------------------------------------------------------------------------
   FEATURES — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .features {
        padding-block: var(--space-15);
    }

    .features__intro {
        margin-bottom: var(--space-8);
    }

    .features__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }

    .feature-card {
        padding: var(--space-5) var(--space-3);
    }

}


/* --------------------------------------------------------------------------
   MEMBERSHIP — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .membership {
        padding-block: var(--space-15);
    }

    .membership__intro {
        margin-bottom: var(--space-8);
    }

    .membership__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .plan-card {
        padding: var(--space-5) var(--space-4);
    }

}


/* --------------------------------------------------------------------------
   PROGRAMS — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .programs {
        padding-block: var(--space-15);
    }

    .programs__intro {
        margin-bottom: var(--space-8);
    }

    .programs__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .program-card {
        height: 320px;
    }

    .program-card__content {
        padding: var(--space-4);
    }

    .program-card__content h3 {
        font-size: 1.25rem;
    }

}


/* --------------------------------------------------------------------------
   TRAINERS — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .trainers {
        padding-block: var(--space-15);
    }

    .trainers__intro {
        margin-bottom: var(--space-8);
    }

    .trainers__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
        margin-bottom: var(--space-6);
    }

}


/* --------------------------------------------------------------------------
   FACILITY GALLERY — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .gallery {
        padding-block: var(--space-15);
    }

    .gallery__intro {
        margin-bottom: var(--space-8);
    }

    .gallery__grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 160px;
        gap: var(--space-3);
    }

    .gallery__item {
        height: auto;
    }

    /* First item — large featured image, spans 2 columns and 2 rows */
    .gallery__item--large {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery__item figcaption {
        font-size: 0.9375rem;
    }

}


/* --------------------------------------------------------------------------
   TESTIMONIALS — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .testimonials {
        padding-block: var(--space-15);
    }

    .testimonials__intro {
        margin-bottom: var(--space-8);
    }

    .testimonial-card {
        flex: 0 0 340px;
        padding: var(--space-5);
    }

    .testimonial-card__quote {
        font-size: 1rem;
    }

}


/* --------------------------------------------------------------------------
   FAQ — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .faq {
        padding-block: var(--space-15);
    }

    .faq__intro {
        margin-bottom: var(--space-8);
    }

    .faq-item__question {
        font-size: 1.125rem;
        padding-block: var(--space-4);
    }

}


/* --------------------------------------------------------------------------
   CTA — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .cta {
        padding-block: var(--space-15);
    }

    .cta__content h2 {
        font-size: 2.75rem;
    }

    .cta__content > p {
        font-size: 1.25rem;
        max-width: 560px;
    }

    .cta__actions {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }

    .cta__actions .btn {
        width: auto;
        padding-inline: var(--space-5);
    }

}


/* --------------------------------------------------------------------------
   FOOTER — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .site-footer {
        padding-block: var(--space-10) var(--space-4);
    }

    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: var(--space-4);
    }

    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

}


/* --------------------------------------------------------------------------
   PAGE HEADER BAND — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .page-header {
        padding-block: var(--space-10) var(--space-8);
    }

    .page-header h1 {
        font-size: 3rem;
    }

    .page-header p {
        font-size: 1.0625rem;
    }

}


/* --------------------------------------------------------------------------
   CONTACT PAGE — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .contact-section {
        padding-block: var(--space-15);
    }

    .contact-grid {
        grid-template-columns: 1.3fr 1fr;
        gap: var(--space-5);
        align-items: start;
    }

    .contact-form-card {
        padding: var(--space-5);
    }

}


/* --------------------------------------------------------------------------
   ABOUT PAGE — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .about-story {
        padding-block: var(--space-15);
    }

    .about-story__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    .about-story__image img {
        height: 380px;
    }

    .about-values {
        padding-block: var(--space-15);
    }

    .about-values__intro {
        margin-bottom: var(--space-8);
    }

    .about-values__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }

    .about-stats {
        padding-block: var(--space-10);
    }

    .about-stats__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
    }

    .stat-item__number {
        font-size: 2.75rem;
    }

}


/* --------------------------------------------------------------------------
   MEMBERSHIP PAGE STRIPS — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .reassurance-strip {
        padding-block: var(--space-4);
    }

    .reassurance-strip__inner {
        padding: var(--space-5);
    }

    .reassurance-strip__inner h2 {
        font-size: 1.5rem;
    }

    .faq-link-strip {
        padding-block: var(--space-4) var(--space-8);
    }

    .faq-link-strip__inner p {
        font-size: 1rem;
    }

}


/* --------------------------------------------------------------------------
   CLASSES PAGE — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .schedule {
        padding-block: var(--space-15);
    }

    .schedule__intro {
        margin-bottom: var(--space-8);
    }

    .schedule__table th,
    .schedule__table td {
        padding: var(--space-3);
        font-size: 0.9375rem;
    }

}


/* --------------------------------------------------------------------------
   TRAINERS PAGE — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .trainers-page {
        padding-block: var(--space-15);
    }

    .trainers-page__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }

}


/* --------------------------------------------------------------------------
   FACILITIES PAGE — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .facilities-zones {
        padding-block: var(--space-15);
    }

    .facilities-zones__grid {
        margin-bottom: var(--space-6);
    }

    .facilities-zones__descriptions {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }

    .amenities {
        padding-block: var(--space-10);
    }

    .amenities__card {
        padding: var(--space-6);
    }

    .amenities__list {
        grid-template-columns: repeat(4, 1fr);
    }

}


/* --------------------------------------------------------------------------
   TOOLS PAGE — DESKTOP
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {

    .tools-section {
        padding-block: var(--space-15);
    }

    .tools-tabs {
        flex-direction: row;
        max-width: 600px;
        margin-inline: auto;
        margin-bottom: var(--space-8);
    }

    .tools-tab {
        flex: 1;
    }

}


/* --------------------------------------------------------------------------
   LARGE DESKTOP — 1280px and up (full container width reached)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {

    :root {
        --container-padding: var(--space-6);
    }

}