/**
 * PT. PRESISI AUTO MEDIKA - RESPONSIVE STYLESHEET
 * 
 * Comprehensive breakpoints:
 * Mobile: 320px - 767px (320px, 360px, 375px, 390px, 414px)
 * Tablet: 768px - 1023px (768px, 820px, 1024px)
 * Desktop: 1024px+ (1280px, 1440px, 1920px, 2560px)
 */

/* ==========================================================================
   DESKTOP LARGE & ULTRA-WIDE (1440px - 2560px)
   ========================================================================== */
@media (min-width: 1440px) {
    .container {
        max-width: 1360px;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }
}

/* ==========================================================================
   LAPTOPS & STANDARD DESKTOP (1024px - 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lineup-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   TABLET LANDSCAPE & PORTRAIT (768px - 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
    .main-nav,
    .header-actions .btn {
        display: none;
    }

    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-company.hero-fullbleed {
        min-height: 620px;
    }

    .hero-company.hero-fullbleed::before {
        width: 75%;
        background-position: center center;
    }

    .hero-company.hero-fullbleed::after {
        background: linear-gradient(to right,
            #FFFFFF 0%,
            #FFFFFF 30%,
            rgba(255, 255, 255, 0.95) 42%,
            rgba(255, 255, 255, 0.60) 58%,
            rgba(255, 255, 255, 0.0) 75%
        );
    }

    .hero-fullbleed .hero-content {
        max-width: 480px;
    }

    /* Editorial Two-Column Hero (About & Product) Tablet */
    .hero-editorial {
        padding-top: clamp(2.5rem, 5vh, 3.5rem);
        padding-bottom: clamp(3rem, 6vh, 4rem);
    }

    .hero-editorial-grid {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }

    .hero-editorial-content {
        max-width: 100%;
    }

    .hero-editorial-visual {
        max-width: 640px;
        margin: 0 auto;
    }

    .tech-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .manufacturing-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-bottom: 3rem;
    }

    .manufacturing-content {
        max-width: 100%;
    }

    .manufacturing-visual-wrap {
        max-width: 640px;
        margin: 0 auto;
    }

    .manufacturing-floating-card {
        bottom: -20px;
        right: 20px;
        max-width: 360px;
    }

    .manufacturing-features-panel {
        padding: 2rem 2.25rem;
    }

    .manufacturing-feature-col:not(:last-child) {
        padding-right: 1.75rem;
    }

    .manufacturing-feature-col:not(:first-child) {
        padding-left: 1.75rem;
    }

    .magteeth-banner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .magteeth-model-showcase {
        max-width: 520px;
        margin: 0 auto;
    }

    .clinical-layout-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .japan-tech-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .contact-layout-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .human-impact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

/* ==========================================================================
   MOBILE PHONES (max-width: 767px)
   Comprehensive refinement per Mobile Responsive Specification
   ========================================================================== */
@media (max-width: 767px) {
    :root {
        --space-3xl: 2.5rem;
        --space-4xl: 3.5rem;
    }

    /* 2. Mobile Header & Breathing Room */
    .header-inner {
        height: 72px;
    }

    .brand-logo-img {
        height: 46px;
        max-width: 140px;
    }

    /* 36-56px breathing room between bottom of Header and first content section */
    .hero-company {
        padding-top: clamp(2.5rem, 6vh, 3.5rem); /* 40px - 56px */
        padding-bottom: clamp(2.25rem, 5vh, 3rem);
    }

    /* 3. Mobile Page Content Gutter: 16-20px horizontal padding */
    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* 4. Mobile Compact Buttons (width: fit-content, 48-52px height, 24-28px horizontal padding) */
    .btn {
        width: fit-content;
        max-width: 100%;
        min-height: 48px;
        padding: 0.78rem 1.65rem; /* ~26px horizontal padding */
        font-size: 0.95rem; /* 15-16px */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .btn-lg {
        min-height: 50px;
        padding: 0.82rem 1.75rem;
        font-size: 0.98rem;
    }

    .btn-sm {
        min-height: 40px;
        padding: 0.5rem 1.25rem;
        font-size: 0.88rem;
    }

    /* 5. Home Page — Mobile Hero (Full-bleed, vivid photograph, substantially reduced overlay) */
    .hero-company.hero-fullbleed {
        min-height: clamp(520px, 80vh, 600px);
        padding-top: clamp(2.5rem, 6vh, 3.5rem);
        padding-bottom: 2rem;
        display: flex;
        align-items: flex-start;
        position: relative;
    }

    .hero-company.hero-fullbleed::before {
        width: 100%;
        height: 100%;
        background-image: url('../images/company/dentist-patient-consultation.jpg');
        background-size: cover;
        background-position: 60% 80%; /* Rich view of dentist, patient, and dental clinic */
        background-repeat: no-repeat;
    }

    /* Substantially reduced white overlay: soft at top for text readability, crystal-clear lower half */
    .hero-company.hero-fullbleed::after {
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(255, 255, 255, 0.68) 28%,
            rgba(255, 255, 255, 0.25) 48%,
            rgba(255, 255, 255, 0.0) 64%
        );
    }

    .for-mobile {
        display: inline;
    }

    .for-desktop {
        display: none;
    }

    .hero-fullbleed .hero-content {
        max-width: 100%;
        position: relative;
        z-index: 3;
    }

    .hero-fullbleed .hero-content h1 {
        font-size: clamp(1.48rem, 5.2vw, 1.75rem);
        line-height: 1.24;
        letter-spacing: -0.02em;
        margin-bottom: 0.85rem;
        color: var(--color-charcoal-dark);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }

    .hero-fullbleed .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.58;
        margin-bottom: 1.5rem;
        max-width: 95%;
        color: var(--color-charcoal-body);
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }

    .hero-fullbleed .hero-cta-group {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .hero-fullbleed .hero-cta-group .btn {
        width: fit-content;
        min-height: 48px;
        padding: 0.75rem 1.6rem;
    }

    /* Editorial Two-Column Hero (About & Product) Mobile */
    .hero-editorial {
        padding-top: 2rem;
        padding-bottom: 2.75rem;
    }

    .hero-editorial-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .hero-editorial-content {
        max-width: 100%;
    }

    .product-hero-brand .magteeth-logo-display {
        max-width: 170px;
        margin-bottom: 0.75rem;
    }

    .hero-editorial-eyebrow {
        font-size: 0.725rem;
        letter-spacing: 0.1em;
        margin-bottom: 0.65rem;
    }

    .hero-editorial-headline {
        font-size: clamp(1.75rem, 6.2vw, 2.25rem);
        line-height: 1.18;
        margin: 0 0 0.65rem 0;
    }

    .hero-editorial-tagline {
        font-size: 1.05rem;
        margin: 0 0 0.85rem 0;
    }

    .hero-editorial-divider {
        margin-bottom: 1.1rem;
    }

    .hero-editorial-lead {
        font-size: 0.95rem;
        line-height: 1.58;
        margin-bottom: 1.5rem;
    }

    .hero-editorial-cta {
        gap: 0.75rem;
    }

    .hero-editorial-cta .btn {
        min-height: 44px;
        padding: 0.65rem 1.45rem;
        font-size: 0.9rem;
        width: fit-content;
    }

    .hero-editorial-visual {
        width: 100%;
        margin: 0;
    }

    .hero-editorial-frame {
        border-radius: 20px;
    }

    .hero-editorial-frame img {
        aspect-ratio: 16 / 11;
    }

    /* 6 & 7. Mobile Image Spacing & Clinical Photographs */
    .clinical-images-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem;
        margin-top: 1rem;
    }

    .clinical-thumb-frame {
        width: 100%;
        border-radius: 13px;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border: 1px solid var(--color-border-card);
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .clinical-thumb-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .clinical-diagram-card {
        padding: 1.25rem 1rem;
        grid-template-columns: 1fr 1fr;
        gap: 0.85rem;
        text-align: center;
    }

    .clinical-diagram-card img {
        max-height: 130px;
    }

    .clinical-diagram-card > div {
        grid-column: span 2;
        text-align: left;
    }

    /* 8. Home — Magnetic Attachment Clinical Applications Tabs */
    .clinical-layout-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tabs-nav {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        background: var(--color-warm-gray);
        padding: 0.35rem;
        border-radius: var(--radius-pill);
        border: 1px solid var(--color-border-card);
    }

    .tab-btn {
        flex: 1;
        width: auto;
        min-height: 44px;
        padding: 0.65rem 0.6rem;
        font-size: 0.86rem;
        font-weight: 600;
        border-radius: var(--radius-pill);
        text-align: center;
        white-space: nowrap;
    }

    /* Product Page — Component Part II / Keeper Systems Mobile Tabs */
    #keeper-system .tabs-nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-bottom: 2rem;
        padding: 0.35rem;
        background: var(--color-warm-gray);
        border-radius: var(--radius-pill);
        border: 1px solid var(--color-border-card);
    }

    #keeper-system .tabs-nav::-webkit-scrollbar {
        display: none;
    }

    #keeper-system .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;
        padding: 0.65rem 1.25rem;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: var(--radius-pill);
        text-align: center;
        box-sizing: border-box;
    }

    /* 9. Product Page — Clinical Cases Card */
    .clinical-case-card {
        padding: 1.25rem 0.85rem;
        border-radius: 14px;
        margin-bottom: 1.5rem !important;
    }

    /* 10. Mobile Section Spacing & Rhythm (48-72px) */
    .section-padding {
        padding-top: clamp(3rem, 7.5vw, 4rem);
        padding-bottom: clamp(3rem, 7.5vw, 4rem);
    }

    .section-padding-sm {
        padding-top: clamp(2rem, 5vw, 2.75rem);
        padding-bottom: clamp(2rem, 5vw, 2.75rem);
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-header p {
        margin-top: 0.75rem;
    }

    /* 11. Mobile Typography */
    h1 {
        font-size: clamp(1.85rem, 5.8vw, 2.25rem);
        line-height: 1.2;
    }

    h2 {
        font-size: clamp(1.45rem, 4.5vw, 1.85rem);
        line-height: 1.24;
    }

    h3 {
        font-size: clamp(1.15rem, 3.8vw, 1.4rem);
        line-height: 1.3;
    }

    p {
        font-size: 0.95rem;
        line-height: 1.62;
    }

    /* 12. MAGTEETH Mobile Section */
    .magteeth-logo-display {
        max-width: 200px;
        height: auto;
        margin-bottom: 1rem;
    }

    .magteeth-banner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .magteeth-model-showcase {
        max-width: 100%;
        margin: 0 auto;
    }

    /* 13. Mobile Cards Clean Spacing */
    .pillar-card,
    .advantage-card,
    .clinical-info-card,
    .contact-form-card,
    .contact-info-panel,
    .lineup-card,
    .japan-card {
        padding: 1.35rem 1.15rem;
        border-radius: 14px;
    }

    .pillars-grid,
    .advantages-grid,
    .lineup-grid,
    .tech-grid,
    .japan-tech-grid,
    .contact-layout-grid,
    .human-impact-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .japan-collab-diagram {
        flex-direction: column;
        gap: 1rem;
    }

    .collab-divider-icon {
        transform: rotate(90deg);
    }

    /* 14. Mobile Manufacturing Innovation Section */
    .manufacturing-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .manufacturing-content {
        max-width: 100%;
    }

    .manufacturing-eyebrow {
        font-size: 0.725rem;
        letter-spacing: 0.1em;
        margin-bottom: 0.65rem;
    }

    .manufacturing-headline {
        font-size: clamp(1.6rem, 5.8vw, 1.95rem);
        line-height: 1.18;
        margin: 0.35rem 0 0.85rem 0;
    }

    .manufacturing-divider {
        margin-bottom: 1.1rem;
    }

    .manufacturing-lead {
        font-size: 0.94rem;
        line-height: 1.58;
        margin-bottom: 1.5rem;
    }

    .manufacturing-tech-list {
        margin-bottom: 1.5rem;
        max-width: 100%;
    }

    .manufacturing-tech-row {
        gap: 0.95rem;
        padding: 0.85rem 0;
    }

    .tech-row-num {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        border-radius: 50%;
    }

    .tech-row-title {
        font-size: 0.96rem;
    }

    .tech-row-desc {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .manufacturing-cta-wrap {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .manufacturing-cta-wrap .btn-sm {
        width: fit-content;
        min-height: 42px;
        padding: 0.55rem 1.35rem;
        font-size: 0.88rem;
    }

    .manufacturing-visual-wrap {
        width: 100%;
        margin: 0;
    }

    .manufacturing-image-frame {
        border-radius: 20px;
    }

    .manufacturing-image-frame img {
        aspect-ratio: 16 / 11;
    }

    .manufacturing-floating-card {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 1rem;
        border-radius: 16px;
        padding: 1.25rem 1.35rem;
        box-shadow: var(--shadow-subtle);
    }

    .manufacturing-features-panel {
        grid-template-columns: 1fr;
        padding: 1.5rem 1.25rem;
        border-radius: 18px;
        margin-top: 1.5rem;
    }

    .manufacturing-feature-col:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid var(--color-border-subtle);
        padding-right: 0;
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .manufacturing-feature-col:not(:first-child) {
        padding-left: 0;
    }

    .feature-col-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .feature-icon-box {
        width: 36px;
        height: 36px;
        border-radius: 9px;
    }

    .feature-icon-box svg {
        width: 18px;
        height: 18px;
    }

    .feature-col-title {
        font-size: 0.9rem;
    }

    .feature-col-desc {
        font-size: 0.85rem;
        line-height: 1.55;
    }

    /* Mobile Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand-col .brand-logo-img,
    .footer-logo-img {
        height: 68px;
        max-width: 190px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ==========================================================================
   SMALL MOBILE PHONES (320px - 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .btn {
        padding: 0.72rem 1.45rem;
        font-size: 0.92rem;
    }

    .tab-btn {
        font-size: 0.8rem;
        padding: 0.6rem 0.4rem;
    }
}

@media (max-width: 375px) {
    .brand-logo-img {
        height: 40px;
        max-width: 125px;
    }

    .hero-company.hero-fullbleed .hero-content h1 {
        font-size: 1.4rem;
    }

    h1 {
        font-size: 1.7rem;
    }

    h2 {
        font-size: 1.38rem;
    }

    .tab-btn {
        font-size: 0.75rem;
        padding: 0.55rem 0.35rem;
        white-space: normal;
        line-height: 1.2;
    }

    .pillar-card,
    .advantage-card,
    .clinical-info-card,
    .clinical-case-card,
    .contact-form-card {
        padding: 1.15rem 0.9rem;
    }

    .manufacturing-headline {
        font-size: 1.38rem;
    }

    .manufacturing-floating-card {
        padding: 1.15rem 1rem;
    }

    .manufacturing-features-panel {
        padding: 1.25rem 1rem;
    }
}

/* ==========================================================================
   ACCESSIBILITY: PREFERS REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}