/*
 * Final smartphone responsive layer for subpages only.
 * Top pages do not load this file.
 * One shared layout for every phone-sized viewport.
 */
@media (max-width: 767px) {
    html {
        width: 100%;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    body[data-page-theme] {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body[data-page-theme] *,
    body[data-page-theme] *::before,
    body[data-page-theme] *::after {
        box-sizing: border-box !important;
    }

    body[data-page-theme] :where(
        main, section, article, aside, div, nav, header, footer,
        h1, h2, h3, h4, p, ul, ol, li, table, tbody, tr, th, td
    ) {
        min-width: 0;
    }

    body[data-page-theme] :where(h1, h2, h3, h4, p, li, th, td, a, span) {
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        line-break: strict !important;
    }

    body[data-page-theme] :where(h1, h2, .page-title, .section-h2) br,
    body[data-page-theme] br.pc-br {
        display: none !important;
    }

    /* Mobile content must never stay hidden waiting for a scroll animation. */
    body[data-page-theme].subpage-motion-ready .motion-reveal,
    body[data-page-theme].subpage-motion-ready .motion-reveal.motion-from-left,
    body[data-page-theme].subpage-motion-ready .motion-reveal.motion-from-right,
    body[data-page-theme].subpage-motion-ready .page-hero .hero-badge,
    body[data-page-theme].subpage-motion-ready .page-hero .hero-tag,
    body[data-page-theme].subpage-motion-ready .page-hero .page-title,
    body[data-page-theme].subpage-motion-ready .page-hero .page-lead,
    body[data-page-theme].subpage-motion-ready .page-hero .hero-photo-wrap {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        clip-path: none !important;
        transform: none !important;
        animation: none !important;
    }

    body[data-page-theme] .subpage-charm-layer,
    body[data-page-theme] .subpage-scroll-progress {
        display: none !important;
    }

    /* Compact, stable mobile header. */
    body[data-page-theme] .top-note {
        display: none !important;
    }

    body[data-page-theme] .site-header {
        top: 0 !important;
        width: 100% !important;
        min-height: 66px !important;
    }

    body[data-page-theme] .header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 66px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        gap: 6px !important;
    }

    body[data-page-theme] .logo {
        position: static !important;
        display: flex !important;
        flex: 0 0 150px !important;
        align-items: center !important;
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body[data-page-theme] .logo img {
        position: static !important;
        display: block !important;
        width: 150px !important;
        min-width: 0 !important;
        max-width: 150px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 48px !important;
        object-fit: contain !important;
        object-position: left center !important;
        transform: none !important;
    }

    body[data-page-theme] .header-mobile-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        margin: 0 0 0 auto !important;
        gap: 4px !important;
    }

    body[data-page-theme] .header-mobile-actions .mobile-news-button,
    body[data-page-theme] .header-mobile-actions .mobile-news-button:not(:has(.new-badge)) {
        display: inline-flex !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 3px !important;
        border-radius: 50% !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    body[data-page-theme] .header-mobile-actions .mobile-news-button:has(.new-badge) {
        flex-direction: column !important;
        flex-basis: 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
    }

    body[data-page-theme] .header-mobile-actions .new-badge {
        position: static !important;
        display: block !important;
        margin: 0 0 1px !important;
        font-size: 8px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    body[data-page-theme] .menu-toggle {
        display: inline-flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    body[data-page-theme] .nav {
        top: 66px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 76px) !important;
        overflow-y: auto !important;
    }

    /* Breadcrumb and page hero. */
    body[data-page-theme] .breadcrumb {
        display: flex !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 14px 0 !important;
        gap: 5px !important;
        flex-wrap: wrap !important;
        font-size: 10px !important;
        line-height: 1.5 !important;
    }

    body[data-page-theme] .page-hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 16px) !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 10px auto 20px !important;
        padding: 20px 14px !important;
        gap: 16px !important;
        align-items: start !important;
        overflow: hidden !important;
        border-radius: 20px !important;
    }

    body[data-page-theme] .page-hero > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body[data-page-theme] .hero-badge {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        padding: 5px 10px !important;
        font-size: 9px !important;
        line-height: 1.4 !important;
    }

    body[data-page-theme] .page-title {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px !important;
        font-size: 24px !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
        text-wrap: pretty !important;
    }

    body[data-page-theme] .page-lead {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
        letter-spacing: 0 !important;
    }

    body[data-page-theme] .hero-tags {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
    }

    body[data-page-theme] .hero-tag {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 5px 7px !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap {
        position: relative !important;
        display: block !important;
        width: 260px !important;
        min-width: 0 !important;
        max-width: min(260px, 100%) !important;
        height: 156px !important;
        min-height: 156px !important;
        max-height: 156px !important;
        margin: 0 auto !important;
        justify-self: center !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-width: 4px !important;
        border-radius: 16px !important;
        clip-path: none !important;
        transform: none !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap::before,
    body[data-page-theme] .page-hero .hero-photo-wrap::after {
        display: none !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center 28% !important;
        transform: none !important;
        animation: none !important;
    }

    /* Main content and typography. */
    body[data-page-theme] .quick-nav-wrap,
    body[data-page-theme] .main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    body[data-page-theme] .quick-nav {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 12px !important;
        gap: 7px !important;
        border-radius: 16px !important;
    }

    body[data-page-theme] .quick-nav-item {
        width: 100% !important;
        min-height: 44px !important;
        padding: 9px 11px !important;
        font-size: 12px !important;
    }

    body[data-page-theme] .section-block {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
        padding: 22px 14px !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    body[data-page-theme] .section-head {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        padding-bottom: 12px !important;
    }

    body[data-page-theme] .section-en {
        max-width: 100% !important;
        padding: 4px 9px !important;
        font-size: 9px !important;
        letter-spacing: .06em !important;
    }

    body[data-page-theme] .section-h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 10px !important;
        font-size: 21px !important;
        line-height: 1.5 !important;
        letter-spacing: 0 !important;
        text-align: left !important;
        text-wrap: pretty !important;
    }

    body[data-page-theme] .section-lead {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
        text-align: left !important;
    }

    body[data-page-theme] :where(h3, .card-title, .care-card-title, .class-card-title, .facility-card-title, .meal-card-title) {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }

    body[data-page-theme] :where(p, li, dd, td, .card-body, .card-desc, .care-card-desc) {
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    /* Every desktop grid becomes one predictable column. */
    body[data-page-theme] :where(
        .access-grid,
        .card-grid,
        .care-grid,
        .care-cards-grid,
        .checkup-grid,
        .class-grid,
        .facility-grid,
        .feature-grid,
        .first-guide-grid,
        .hours-grid,
        .icon-grid,
        .meal-grid,
        .merit-grid,
        .policy-grid,
        .prep-grid,
        .staff-grid,
        .step-grid,
        .support-grid,
        .feature-box,
        .doctor-profile-wrap,
        .highlight-banner
    ),
    body[data-page-theme] main [style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 14px !important;
    }

    body[data-page-theme] :where(
        .card, .care-card, .checkup-card, .class-card, .facility-card,
        .feature-card, .info-card, .meal-card, .meal-link-card,
        .merit-card, .policy-card, .prep-card, .staff-card,
        .step-card, .access-card, .emergency-card, .reserve-box
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Images use explicit heights and cannot stretch their parent. */
    body[data-page-theme] :where(
        .card-photo,
        .care-card-photo,
        .checkup-card-photo,
        .feature-box-photo,
        .facility-card-img,
        .class-card-img,
        .meal-card-img,
        .doctor-photo,
        .highlight-banner-img
    ) {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    body[data-page-theme] :where(
        .card-photo,
        .care-card-photo,
        .checkup-card-photo,
        .feature-box-photo,
        .facility-card-img,
        .class-card-img,
        .meal-card-img,
        .doctor-photo,
        .highlight-banner-img
    ) img {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        animation: none !important;
    }

    /* Two-column information tables become vertical cards. */
    body[data-page-theme] .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body[data-page-theme] :where(.schedule-table, .info-table),
    body[data-page-theme] .section-block > table:not(.hours-table) {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border: 0 !important;
        background: transparent !important;
    }

    body[data-page-theme] :where(.schedule-table, .info-table) tbody,
    body[data-page-theme] :where(.schedule-table, .info-table) tr,
    body[data-page-theme] :where(.schedule-table, .info-table) th,
    body[data-page-theme] :where(.schedule-table, .info-table) td,
    body[data-page-theme] .section-block > table:not(.hours-table) tbody,
    body[data-page-theme] .section-block > table:not(.hours-table) tr,
    body[data-page-theme] .section-block > table:not(.hours-table) th,
    body[data-page-theme] .section-block > table:not(.hours-table) td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body[data-page-theme] :where(.schedule-table, .info-table) tr,
    body[data-page-theme] .section-block > table:not(.hours-table) tr {
        margin: 0 0 11px !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 13px !important;
        background: #fff !important;
    }

    body[data-page-theme] :where(.schedule-table, .info-table) th,
    body[data-page-theme] :where(.schedule-table, .info-table) td,
    body[data-page-theme] .section-block > table:not(.hours-table) th,
    body[data-page-theme] .section-block > table:not(.hours-table) td {
        padding: 11px 12px !important;
        border: 0 !important;
        text-align: left !important;
    }

    body[data-page-theme] :where(.schedule-table, .info-table) th,
    body[data-page-theme] .section-block > table:not(.hours-table) th {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    body[data-page-theme] :where(.schedule-table, .info-table) td,
    body[data-page-theme] .section-block > table:not(.hours-table) td {
        border-top: 1px solid var(--border-color) !important;
        font-size: 13px !important;
        line-height: 1.8 !important;
    }

    /* Multi-column opening-hours tables remain usable inside their own scroller. */
    body[data-page-theme] .hours-grid > div {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body[data-page-theme] .hours-table {
        width: 560px !important;
        min-width: 560px !important;
        max-width: none !important;
        font-size: 11px !important;
    }

    body[data-page-theme] .hours-table th,
    body[data-page-theme] .hours-table td {
        padding: 8px 6px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    body[data-page-theme] :where(.button, .btn-detail, .btn-reserve, .btn-tel, .tel-button) {
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body[data-page-theme] .footer-inner,
    body[data-page-theme] .footer-nav {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 18px !important;
    }

    body[data-page-theme] .site-footer {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }
}

@media (max-width: 374px) {
    body[data-page-theme] .logo {
        flex-basis: 142px !important;
        width: 142px !important;
        min-width: 142px !important;
        max-width: 142px !important;
    }

    body[data-page-theme] .logo img {
        width: 142px !important;
        max-width: 142px !important;
    }

    body[data-page-theme] .header-mobile-actions > a:first-child {
        display: none !important;
    }

    body[data-page-theme] .page-title {
        font-size: 22px !important;
    }

    body[data-page-theme] .hero-tags {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page-theme] .page-hero .hero-photo-wrap {
        width: 230px !important;
        max-width: min(230px, 100%) !important;
        height: 142px !important;
        min-height: 142px !important;
        max-height: 142px !important;
    }
}

/* Meal gallery detail pages use a smaller standalone structure. */
@media (max-width: 767px) {
    body.meal-gallery-page .page-header {
        width: 100% !important;
        min-height: 60px !important;
        padding: 9px 12px !important;
        gap: 8px !important;
    }

    body.meal-gallery-page .page-header-title {
        font-size: 12px !important;
        line-height: 1.4 !important;
        text-align: right !important;
    }

    body.meal-gallery-page .hero {
        width: 100% !important;
        max-width: 100% !important;
        margin: 26px auto 0 !important;
        padding: 0 14px 28px !important;
    }

    body.meal-gallery-page .hero-title {
        font-size: 25px !important;
        line-height: 1.5 !important;
    }

    body.meal-gallery-page .gallery-section,
    body.meal-gallery-page .masonry {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
        columns: 1 !important;
    }
}