/* =========================================================
   BLACK PEARL — MOBILE RESPONSIVE OVERHAUL
   Comprehensive mobile-first enhancements for all pages
   ========================================================= */

/* ─── Global Mobile ─── */
@media (max-width: 768px) {
    :root {
        --max-width: 100%;
    }

    body {
        font-size: 14px;
    }

    .container {
        padding: 0 6%;
    }

    .page-wrapper {
        padding-top: 70px;
    }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.3rem; }

    .btn-primary,
    .btn-outline,
    .btn-gold {
        padding: 13px 28px;
        font-size: 0.65rem;
        width: 100%;
        text-align: center;
    }

    /* Navbar mobile refinements */
    .navbar__inner {
        height: 70px;
    }

    .navbar__logo-img {
        height: 38px;
    }

    .navbar__nav {
        top: 70px;
    }
}

/* ─── HOME PAGE MOBILE ─── */
@media (max-width: 768px) {
    /* Hero — stacked layout with image first */
    .home-hero {
        padding-top: 70px;
    }

    .home-hero__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .home-hero__content {
        padding: 40px 0 32px;
        padding-right: 0;
        text-align: center;
        order: 2;
    }

    .home-hero__image {
        height: 320px;
        order: 1;
    }

    .home-hero__image img {
        min-height: 320px;
    }

    .home-hero__eyebrow {
        margin-bottom: 16px;
        font-size: 0.55rem;
    }

    .home-hero__title {
        font-size: 2rem;
        margin-bottom: 16px;
    }

    .home-hero__sub {
        font-size: 0.95rem;
        margin-bottom: 28px;
        max-width: 100%;
        line-height: 1.7;
    }

    .home-hero__actions {
        justify-content: center;
    }

    /* Stats — 2x2 grid with compact spacing */
    .home-stats {
        padding: 36px 0;
    }

    .home-stats__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .home-stat__num {
        font-size: 1.8rem;
        margin-bottom: 4px;
    }

    .home-stat__label {
        font-size: 0.5rem;
        letter-spacing: 0.15em;
    }

    /* Designer Slideshow — taller for mobile */
    .home-designers {
        padding: 48px 0 0;
    }

    .designer-slideshow {
        aspect-ratio: 4 / 5;
    }

    .designer-slide-overlay {
        padding: 32px 20px 24px;
    }

    .designer-slide-name {
        font-size: 1.1rem;
    }

    .slide-arrow {
        opacity: 1;
        padding: 10px 13px;
        font-size: 18px;
    }

    .slide-arrow-left { left: 12px; }
    .slide-arrow-right { right: 12px; }

    .slide-dots {
        bottom: 14px;
        gap: 8px;
    }

    .slide-dot {
        width: 8px;
        height: 8px;
    }

    /* Section Headers */
    .home-sections__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 32px;
        padding-bottom: 16px;
    }

    .home-sections__eyebrow {
        font-size: 0.55rem;
    }

    /* Season Cards — full width stacked */
    .home-seasons {
        padding: 48px 0;
    }

    .home-seasons__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .season-card__img-wrap {
        height: 200px;
    }

    .season-card__body {
        padding: 20px;
    }

    .season-card__title {
        font-size: 1.2rem;
    }

    /* Models Grid — 2 column */
    .home-models {
        padding: 0 0 48px;
    }

    .home-models__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .model-mini-card__img-wrap {
        height: 220px;
    }

    .model-mini-card__info {
        padding: 14px 16px;
    }

    .model-mini-card__info h4 {
        font-size: 0.95rem;
    }

    .model-mini-card__cat {
        font-size: 0.45rem;
    }

    /* Contact Section — stacked */
    .home-contact {
        padding: 48px 0;
    }

    .home-contact__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .home-contact__left h2 {
        margin-bottom: 24px;
    }

    .contact-detail {
        gap: 12px;
    }

    .contact-detail strong {
        font-size: 0.55rem;
    }

    .contact-detail p {
        font-size: 0.85rem;
    }
}

/* Extra small phones */
@media (max-width: 400px) {
    .home-hero__title {
        font-size: 1.7rem;
    }

    .home-hero__image {
        height: 260px;
    }

    .home-models__grid {
        grid-template-columns: 1fr;
    }

    .model-mini-card__img-wrap {
        height: 280px;
    }

    .designer-slideshow {
        aspect-ratio: 3 / 4;
    }
}

/* ─── ABOUT PAGE MOBILE ─── */
@media (max-width: 768px) {
    .about-hero {
        padding: 48px 0 36px;
    }

    .about-hero h1 {
        font-size: 2rem;
    }

    .about-hero__desc {
        font-size: 0.9rem;
    }

    .about-story {
        padding: 48px 0;
    }

    .about-story__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about-story__img {
        height: 280px;
    }

    .about-stats {
        padding: 36px 0;
    }

    .about-stats__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .about-stat__num {
        font-size: 1.8rem;
    }

    .about-stat__label {
        font-size: 0.5rem;
    }

    .about-cta {
        padding: 48px 0;
    }
}

/* ─── CONTACT PAGE MOBILE ─── */
@media (max-width: 768px) {
    .contact-page {
        padding: 48px 0;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .contact-info__item {
        gap: 12px;
    }
}

/* ─── SHOWS / SEASONS PAGE MOBILE ─── */
@media (max-width: 768px) {
    .shows-hero {
        padding: 40px 0 32px;
    }

    .shows-hero h1 {
        font-size: 2rem;
    }

    .shows-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ─── SHOW DETAIL PAGE MOBILE ─── */
@media (max-width: 768px) {
    .showdet-hero {
        min-height: 200px;
        height: 28vh;
        max-height: 280px;
    }

    .showdet-hero__overlay {
        padding: 20px;
    }

    .showdet-hero__overlay h1 {
        font-size: 1.6rem;
    }

    .showdet-hero__overlay .showdet-location {
        font-size: 0.55rem;
    }

    .showdet-info {
        padding: 36px 0;
    }

    .showdet-info__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .showdet-designers {
        padding: 36px 0;
    }

    .showdet-designer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .showdet-designer-card__img {
        height: 180px;
    }

    .showdet-designer-card__body {
        padding: 14px;
    }

    .showdet-designer-card__body h4 {
        font-size: 0.9rem;
    }

    /* Gallery grid */
    .showdet-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ─── REGISTRATION PAGE MOBILE ─── */
@media (max-width: 768px) {
    .register-hero {
        padding: 48px 0 32px;
    }

    .register-hero h1 {
        font-size: 1.8rem;
    }

    .register-form-section {
        padding: 36px 0;
    }

    .register-form__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .photo-upload-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .photo-slot {
        height: 100px;
    }
}

/* ─── FOOTER MOBILE ─── */
@media (max-width: 768px) {
    .footer {
        padding-top: 48px;
    }

    .footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 36px;
    }

    .footer__logo {
        height: 36px;
    }

    .footer__tagline {
        font-size: 0.9rem;
    }

    .footer__bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        padding: 20px 0;
    }
}