/* ==========================================================
   RESPONSIVE.CSS - All media queries consolidated
   ========================================================== */

/* ---------------------------------------------------------
   Desktop XXL (1400px+)
   --------------------------------------------------------- */
@media (min-width: 1400px) {
    .container-narrow {
        max-width: 1000px;
    }
    .diplomas-row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.75rem;
    }
}

/* ---------------------------------------------------------
   Desktop to Laptop (992px - 1267px)
   --------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1267px) {
    /* Navbar adjustments */
    .navbar-nav {
        font-size: 1rem !important;
    }
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
    }
    .navbar .btn {
        padding: 0.45rem 0.75rem;
        font-size: 0.95rem;
    }
    .main-header .social-icons {
        display: none;
    }

    /* Branding reduction */
    .main-header .navbar-brand .logo-img {
        width: 48px !important;
        height: 48px !important;
    }
    .main-header .navbar-brand span {
        font-size: 0.9rem;
        letter-spacing: 0.3px;
    }

    /* Nav item spacing */
    .navbar-nav .nav-item {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    /* Container padding */
    .main-header .navbar .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ---------------------------------------------------------
   Desktop narrow (992px - 1199px) - Footer columns
   --------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    .footer .row:first-of-type > [class*='col-']:nth-child(3) {
        transform: translateX(12px);
    }
    .footer .row:first-of-type > [class*='col-']:nth-child(4) {
        transform: translateX(24px);
    }
}

/* ---------------------------------------------------------
   Desktop narrow (992px - 1100px) - Branding extra small
   --------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1100px) {
    .main-header .navbar-brand span {
        font-size: 0.85rem;
        letter-spacing: 0.25px;
    }
    .main-header .navbar-brand .logo-img {
        width: 44px !important;
        height: 44px !important;
    }
    .navbar .btn {
        font-size: 0.88rem;
        padding: 0.42rem 0.85rem;
    }
}

/* ---------------------------------------------------------
   Tablets (max 991px)
   --------------------------------------------------------- */
@media (max-width: 991px) {
    /* Tarifs and reservation */
    .tarifs-content .card .card-body,
    .reservation-info .card-body {
        padding: 1.5rem;
    }
    .tarifs-table .service-name {
        font-size: 0.9rem;
    }
    .tarifs-table .service-duration,
    .tarifs-table .service-price {
        font-size: 0.85rem;
    }

    /* Cookie dog button */
    .cookie-dog-button {
        transform: none !important;
    }

    /* Footer centered */
    .footer .row:first-of-type {
        text-align: center;
    }
    .footer .row:first-of-type > [class*='col-'] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
    .footer .navbar-brand {
        justify-content: center;
    }
    .footer .row:first-of-type ul {
        padding-left: 0;
    }
    .footer .row:first-of-type li {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    .footer .row.align-items-center {
        text-align: center;
    }
    .footer .row.align-items-center .social-icons {
        justify-content: center !important;
    }
    .footer .social-icons a {
        margin-right: 1rem;
    }
    .footer .social-icons a:last-child {
        margin-right: 0;
    }
}

/* ---------------------------------------------------------
   Tablets portrait (768px - 991px) - Diplomas centering
   --------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .highlighted-diplomas .row > div,
    .recent-diplomas .row > div {
        margin-bottom: 2rem;
    }
    .highlighted-diplomas .row > div:last-child,
    .recent-diplomas .row > div:last-child {
        margin-bottom: 0;
    }
    /* Center last diploma if alone on row (odd count) */
    .highlighted-diplomas .row > div:last-child:nth-child(odd),
    .recent-diplomas .row > div:last-child:nth-child(odd) {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ---------------------------------------------------------
   Mobile (max 767px)
   --------------------------------------------------------- */
@media (max-width: 767px) {
    /* Hero */
    .hero-title {
        font-size: 2.5rem !important;
    }
    .hero-subtitle {
        font-size: 1rem !important;
    }
    .hero-buttons .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Sections */
    .section-title {
        font-size: 1.5rem;
    }
    .philosophy-section,
    .activities-preview,
    .cavage-section,
    .testimonials-section {
        padding: 3rem 0;
    }
    .philosophy-section .col-md-7 {
        padding-left: 0.75rem;
    }

    /* Activity cards */
    .activity-card .card-img-top {
        height: 200px;
    }
    .activity-card .card-body {
        padding: 1.5rem 1rem;
    }

    /* Tarifs */
    .tarifs-content .card .card-body {
        padding: 1rem;
    }
    .tarifs-table td {
        padding: 0.75rem 0.25rem;
        font-size: 0.85rem;
    }

    /* Reservation */
    .reservation-info .separator {
        display: none;
    }
    .reservation-info .card-body {
        padding: 1rem;
    }
    .reservation-info h2 {
        font-size: 1.5rem;
    }

    /* Diploma cards */
    .diploma-card {
        min-height: auto;
        max-width: 320px;
    }
    .diploma-card img,
    .diploma-thumb {
        height: 200px;
    }
    .diploma-card .card-body {
        padding: 1rem;
    }
    .diploma-card .card-title {
        font-size: 1rem;
    }
    .highlighted-diplomas .row > div,
    .recent-diplomas .row > div {
        margin-bottom: 1.5rem;
    }
    .highlighted-diplomas .row > div:last-child,
    .recent-diplomas .row > div:last-child {
        margin-bottom: 0;
    }

    /* Swiper */
    .diplomasSwiper .swiper-button-next,
    .diplomasSwiper .swiper-button-prev {
        display: none;
    }
    .diplomasSwiper {
        padding: 20px 10px;
    }

    /* Service cards */
    .service-card .card-img-top {
        height: 200px;
    }

    /* Newsletter */
    .newsletter-section .input-group {
        flex-direction: column;
    }
    .newsletter-section .form-control,
    .newsletter-section .btn {
        border-radius: 5px;
        width: 100%;
    }
    .newsletter-section .btn {
        margin-top: 0.5rem;
    }

    /* Review stats */
    .review-stats-card {
        text-align: center;
        align-items: center;
    }
    .review-stats-card .text-warning {
        display: flex;
        justify-content: center;
    }

    /* Carte cadeau */
    .carte-cadeau #buyGiftCard {
        width: 100% !important;
        margin: 0 auto;
    }

    /* Contact */
    .contact-content .card-body h2 {
        text-align: center;
        justify-content: center;
        display: block;
    }
}

/* ---------------------------------------------------------
   Small mobile (max 576px)
   --------------------------------------------------------- */
@media (max-width: 576px) {
    /* Tarifs table */
    .tarifs-table .service-name,
    .tarifs-table .service-duration,
    .tarifs-table .service-price {
        font-size: 0.8rem;
    }

    /* Newsletter */
    .newsletter-section .form-control,
    .newsletter-section .btn {
        border-radius: 5px;
        margin-bottom: 0.5rem;
    }

    /* Diploma cards */
    .diploma-card {
        max-width: 280px;
    }
    .diploma-card img,
    .diploma-thumb {
        height: 180px;
    }
    .diploma-card .card-title {
        font-size: 0.95rem;
    }
    .diploma-card .badge {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }
}