/* Orientation-dependent scaling for fixed-layout pages */

:root {
    /* Original mock-up dimensions */
    --design-width: 1920;
    --design-height: 1080;
    /* Standardized spacing */
    --content-margin: max(2rem, 6vw);
    --frame-margin: max(1.5rem, 4vw);
    --frame-width: clamp(12px, 1.2vw, 20px);
    --text-padding: max(2.5rem, 8vw);
    /* Button dimensions */
    --button-size: 2.5rem;
    --button-spacing: calc(var(--button-size) * 0.5);
    /* Minimum dimensions for landscape mode */
    --min-landscape-width: 1024px;
    --min-landscape-height: 600px;
    --min-aspect-ratio: 1.4; /* Minimum width/height ratio before switching to portrait */
}

/* Frame lines */
.frame-line-responsive {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.frame-top-responsive {
    top: 0.74vh;
    left: 0.42vw;
    right: 0.42vw;
    width: calc(100% - 0.84vw);
    height: auto;
}

.frame-bottom-responsive {
    bottom: 0.74vh;
    left: 0.42vw;
    right: 0.42vw;
    width: calc(100% - 0.84vw);
    height: auto;
}

.frame-left-responsive {
    top: calc(0.74vh + 12px);
    bottom: calc(0.74vh + 12px);
    left: 0.42vw;
    width: 3.4vw;
    max-width: 65px;
    min-width: 40px;
    background-image: url('../visual_components/section_frame/frame_line_left.svg');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center center;
}

.frame-right-responsive {
    top: calc(0.74vh + 12px);
    bottom: calc(0.74vh + 12px);
    right: 0.42vw;
    width: 3.4vw;
    max-width: 65px;
    min-width: 40px;
    background-image: url('../visual_components/section_frame/frame_line_right.svg');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center center;
}

.frame-heart-responsive {
    position: absolute;
    width: 2.5vw;
    height: 2.5vw;
    max-width: 40px;
    max-height: 40px;
    min-width: 20px;
    min-height: 20px;
    z-index: 0;
    pointer-events: none;
}

.frame-heart-left-responsive {
    top: 4.5vh;
    left: 2.1vw;
}

.frame-heart-right-responsive {
    top: 6vh;
    right: 2.1vw;
}

/* Portrait mode trigger based on aspect ratio or minimum dimensions */
@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
    html {
        height: 100% !important;
    }

    body {
        min-height: 100% !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: block !important;
        padding: 0 !important;
        position: relative !important;
        background: white !important;
    }

    .frame-container {
        position: relative !important;
        width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .frame-content {
        position: relative !important;
        padding: 4rem 1rem 2rem !important;
        min-height: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    /* Frame lines */
    .frame-lines {
        position: fixed !important;
    }

    .frame-line {
        position: fixed !important;
    }

    .frame-line-top,
    .frame-line-bottom {
        left: 8px !important;
        right: 8px !important;
        width: calc(100% - 16px) !important;
        height: 12px !important;
    }

    .frame-line-top {
        top: 8px !important;
    }

    .frame-line-bottom {
        bottom: 8px !important;
    }

    .frame-line-left,
    .frame-line-right {
        top: 8px !important;
        bottom: 8px !important;
        height: calc(100% - 16px) !important;
        width: 12px !important;
    }

    .frame-line-left {
        left: 8px !important;
    }

    .frame-line-right {
        right: 8px !important;
    }

    /* Navigation buttons */
    .nav-button {
        position: fixed !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        background: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
        z-index: 100 !important;
    }

    .nav-button.back-button {
        top: 3rem !important;
        left: 2rem !important;
    }

    .nav-button.home-button {
        top: 3rem !important;
        left: 5rem !important;
    }

    .nav-button a {
        padding: 0.5rem !important;
    }

    /* Hide decorative elements in mobile */
    .landscape-only {
        display: none !important;
    }

    /* Title styles */
    h1.font-rostenfly {
        font-size: 2.5rem !important;
        text-align: center !important;
        margin: 0 0 2rem !important;
    }

    /* Tim.html mobile layout */
    @media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
        .grid-cols-5 {
            display: flex !important;
            flex-direction: column !important;
            gap: 2rem !important;
            width: 100% !important;
            height: auto !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Move title to top */
        .grid-cols-5 > div:nth-child(3) {
            order: -1 !important;
            margin-bottom: 2rem !important;
        }

        /* Create 2x2 grid for doctors */
        .doctor-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 2rem !important;
            width: 100% !important;
            margin-bottom: 2rem !important;
        }

        /* Doctor images */
        .doctor-grid img {
            width: 100% !important;
            max-width: 140px !important;
            height: auto !important;
            margin: 0 auto !important;
        }

        /* Doctor names */
        .doctor-grid p {
            font-size: 1.125rem !important;
            margin-top: 0.5rem !important;
            text-align: center !important;
        }

        /* Action buttons */
        .action-buttons {
            display: flex !important;
            justify-content: center !important;
            gap: 2rem !important;
            margin-top: auto !important;
            padding: 2rem 0 !important;
        }

        .action-button img {
            width: 100px !important;
            height: 100px !important;
        }
    }

    /* Doctor pages – stacked mobile layout tweaks */
    .doctor-page .content-wrapper {
        margin-top: 5rem !important; /* comfortable spacing */
    }

    /* Disable fade-in so images are immediately visible even without JS */
    .doctor-page .scroll-fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Also target the parent container that might be constraining width */
    .doctor-page .content-wrapper .flex.flex-col.items-center.w-full.max-w-md {
        max-width: 100% !important;
    }

    /* Ensure the stage container doesn't clip content */
    .doctor-page .stage {
        overflow: visible !important;
    }

    /* Ensure frame container allows content to be visible */
    .doctor-page .frame-container {
        overflow: visible !important;
    }

    /* ─── MOBILE-ONLY DOCTOR-PAGE FIXES ───────────────────────────────── */
    .doctor-page .stage .frame-content > section:first-of-type {
      display: none !important;
    }
    .doctor-page .speech-bubble-container {
      width: auto !important;
      max-width: 90% !important;
      padding: 0 1rem !important;
      display: inline-block !important;
      z-index: 50 !important;
    }
    .doctor-page .speech-bubble-container h1 {
      font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
      line-height: 1.2 !important;
      word-break: normal !important;
      overflow-wrap: normal !important;
      hyphens: none !important;
      margin: 0 !important;
    }
    .doctor-page .content-wrapper {
      margin-top: 6rem !important;
      padding-top: 1rem !important;
    }
    .doctor-page .content-wrapper img {
      margin: 1rem 0 !important;
    }
    .doctor-page .content-wrapper img:not(.speech-bubble-container img) {
      position: relative !important;
      z-index: 10 !important;
    }
    /* ────────────────────────────────────────────────────────────────────── */
}

/* Landscape mode */
@media (orientation: landscape) and (min-aspect-ratio: 1.4) and (min-width: 1024px) and (min-height: 600px) {
    body {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: white !important;
    }

    .frame-container {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 auto !important;
    }

    .frame-content {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        padding: 1rem !important;
    }

    /* Frame lines in landscape mode */
    .frame-lines {
        position: absolute !important;
    }

    .frame-line {
        position: absolute !important;
    }

    .frame-line-top,
    .frame-line-bottom {
        left: 8px !important;
        right: 8px !important;
        width: calc(100% - 16px) !important;
        height: 12px !important;
    }

    .frame-line-top {
        top: 8px !important;
    }

    .frame-line-bottom {
        bottom: 8px !important;
    }

    .frame-line-left,
    .frame-line-right {
        top: 8px !important;
        bottom: 8px !important;
        height: calc(100% - 16px) !important;
        width: 12px !important;
    }

    .frame-line-left {
        left: 8px !important;
    }

    .frame-line-right {
        right: 8px !important;
    }

    /* Navigation buttons in landscape mode */
    .nav-button {
        position: absolute !important;
        background: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
        z-index: 100 !important;
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    }

    .nav-button.back-button {
        top: calc(var(--button-size) * 3) !important;
        left: calc(var(--button-size) * 3) !important;
        width: calc(var(--button-size) * 1px) !important;
        height: calc(var(--button-size) * 1px) !important;
    }

    .nav-button.home-button {
        top: calc(var(--button-size) * 3) !important;
        left: calc(var(--button-size) * 4.5) !important;
        width: calc(var(--button-size) * 1.2 * 1px) !important;
        height: calc(var(--button-size) * 1.2 * 1px) !important;
    }

    .nav-button a {
        padding: 0.75rem !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-button:hover {
        transform: scale(1.1) !important;
    }

    .nav-button:active {
        transform: scale(0.95) !important;
    }

    /* Hide buttons on homepage */
    body.homepage .nav-button {
        display: none !important;
    }

    /* Show landscape elements */
    .landscape-only {
        display: block !important;
    }
}

/* Portrait – dedicated upright layout with repeating frame lines */
@media (orientation: portrait) {
    /* In portrait we want a dedicated upright layout rather than rotated */
    .stage {
        position: relative;
        width: 100vw;
        min-height: 100vh;
        height: auto;
        transform: none;
        padding: var(--frame-margin);
    }

    /* Frame system for portrait mode - using responsive implementation */
    .frame-line-left,
    .frame-line-right {
        position: fixed;
        top: calc(0.74vh + 12px);
        bottom: calc(0.74vh + 12px);
        width: var(--frame-width);
        max-width: 65px;
        min-width: 40px;
        background-repeat: repeat-y;
        background-size: 100% auto;
        background-position: center center;
        z-index: 10;
        pointer-events: none;
    }

    .frame-line-left {
        left: 0.42vw;
        background-image: url('../visual_components/section_frame/frame_line_left.svg');
    }

    .frame-line-right {
        right: 0.42vw;
        background-image: url('../visual_components/section_frame/frame_line_right.svg');
    }

    /* Top and bottom frame lines */
    .frame-line-top,
    .frame-line-bottom {
        position: fixed;
        left: calc(0.74vh + 12px);
        right: calc(0.74vh + 12px);
        height: var(--frame-width);
        max-height: 65px;
        min-height: 40px;
        background-repeat: repeat-x;
        background-size: auto 100%;
        background-position: center center;
        z-index: 10;
        pointer-events: none;
    }

    .frame-line-top {
        top: 0.42vw;
        background-image: url('../visual_components/section_frame/frame_line_top.svg');
    }

    .frame-line-bottom {
        bottom: 0.42vw;
        background-image: url('../visual_components/section_frame/frame_line_bottom.svg');
    }

    /* Navigation buttons in portrait mode */
    .nav-button {
        position: fixed !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        background: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
        z-index: 100 !important;
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    }

    .nav-button.back-button {
        top: calc(var(--frame-margin) + 0.5rem) !important;
        left: calc(var(--frame-margin) + var(--frame-width) + 0.5rem) !important;
    }

    .nav-button.home-button {
        top: calc(var(--frame-margin) + 0.5rem) !important;
        left: calc(var(--frame-margin) + var(--frame-width) + 3.5rem) !important;
    }

    .nav-button:active {
        transform: scale(0.92) !important;
    }

    /* Content spacing in portrait mode */
    .content-wrapper {
        padding: 0 calc(var(--frame-width) + var(--content-margin));
        margin-top: 3rem;
    }

    /* Standardized text margins */
    .text-content,
    .bubble-text,
    p,
    .text-block {
        padding-left: var(--text-padding) !important;
        padding-right: var(--text-padding) !important;
    }

    /* Speech bubbles in portrait */
    .speech-bubble-container {
        padding: 0 var(--text-padding);
    }

    /* Hide some decorative elements that look cramped on portrait */
    .beetle-car,
    .frame-heart,
    .clown-character,
    .decorative-element,
    .hover-decorative,
    .hover-tree,
    .hover-decorative-rotated90,
    .hover-decorative-rotated180,
    .landscape-only,
    /* NEW: catch hearts inserted without the frame-heart helper class */
    .doctor-page img[src*="section_frame/frame_heart"],
    /* NEW: stray beetle PNGs */
    .doctor-page img[src*="beetle.png"] {
        display: none !important;
    }

    /* Index-page specific tweaks */
    .clown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--content-margin) !important;
        padding: 0 var(--text-padding) !important;
    }

    .action-buttons-row {
        flex-direction: column !important;
        gap: var(--content-margin) !important;
        padding: 0 var(--text-padding) !important;
    }

    /* Mobile-friendly animations */
    /* Fade in on scroll */
    .scroll-fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .scroll-fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Bounce on click */
    .click-bounce {
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .click-bounce:active {
        transform: scale(0.95);
    }

    /* Stagger children animations */
    .stagger-children > * {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .stagger-children > *:nth-child(1) { transition-delay: 0.1s; }
    .stagger-children > *:nth-child(2) { transition-delay: 0.2s; }
    .stagger-children > *:nth-child(3) { transition-delay: 0.3s; }
    .stagger-children > *:nth-child(4) { transition-delay: 0.4s; }
    .stagger-children > *:nth-child(5) { transition-delay: 0.5s; }

    .stagger-children.visible > * {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Common button styles */
.nav-button {
    cursor: pointer !important;
}

.nav-button a {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nav-button img {
    width: 1.5rem !important;
    height: 1.5rem !important;
    object-fit: contain !important;
}

.nav-button.home-button img {
    width: 1.75rem !important;
    height: 1.75rem !important;
}

/* Action buttons */
.action-button {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
}

.action-button:hover {
    transform: scale(1.1) !important;
}

.action-button:active {
    transform: scale(0.95) !important;
}

.action-button img {
    width: 128px !important;
    height: 128px !important;
}

@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
    .action-button img {
        width: 90px !important;
        height: 90px !important;
    }
}

/* ---------------------------------------------------------------
   Landscape doctor pages – scale down speech-bubble action buttons
   --------------------------------------------------------------- */
@media (orientation: landscape) and (min-aspect-ratio: 1.4) and (min-width: 1024px) {
    /* The red + yellow round buttons that hug the speech bubbles
       on individual doctor pages use the generic .action-button img
       size utilities. Override them inside a speech-bubble context
       so they are smaller and overlap the bubble only slightly. */
    .speech-bubble-container .action-button img {
        width: clamp(3.5rem, 5vw, 4.5rem) !important;  /* ≈56-72 px */
        height: auto !important;
    }

    /* Red button can be slightly larger than the yellow one */
    .speech-bubble-container img[alt~="Red"] {
        width: clamp(4.5rem, 7vw, 6rem) !important;  /* ≈72-96 px */
    }
}

/* Previously hid stacked mobile layout in landscape, but it removed all content.
   Rule deleted so content now shows on large screens too. */

/* Doctor pages: disable absolute decorative elements across all orientations */
.doctor-page .frame-heart,
.doctor-page .beetle-car,
.doctor-page .decorative-element,
.doctor-page .clown-character,
.doctor-page .hover-decorative,
.doctor-page .hover-tree {
    display: none !important;
}

/* Stacked mobile flow remains visible even on desktop so content doesn't disappear. */

@media (max-aspect-ratio: 1.4), (max-width: 1024px) {
    /* CSS custom properties for mobile sizing */
    :root {
        --mobile-element-width: 50vw;
        --mobile-element-max-width: 200px;
        --mobile-element-min-width: 150px;
    }

    /* Override Tailwind classes with more specific selectors */
    .doctor-page .speech-bubble-container,
    .doctor-page .speech-bubble-container.max-w-xs,
    .doctor-page .polaroid,
    .doctor-page .cutout-photo {
        width: 40vw !important;
        max-width: 160px !important;
        min-width: 100px !important;
        box-sizing: border-box !important;
    }

    /* Force override any Tailwind width classes */
    .doctor-page .speech-bubble-container.w-full,
    .doctor-page .speech-bubble-container.max-w-xs.w-full {
        width: 40vw !important;
        max-width: 160px !important;
        min-width: 100px !important;
    }

    /* Force override any Tailwind max-width classes */
    .doctor-page .speech-bubble-container.max-w-xs,
    .doctor-page .speech-bubble-container.max-w-xs.max-w-xs {
        max-width: 160px !important;
        width: 40vw !important;
    }

    /* Most specific override for the exact class combination used in HTML */
    .doctor-page .content-wrapper .flex.flex-col.items-center.w-full.max-w-md .relative.mb-6.w-full.flex.justify-center .relative.w-full.max-w-xs.speech-bubble-container {
        width: 40vw !important;
        max-width: 160px !important;
        min-width: 100px !important;
    }

    /* --- Removed overly broad width override that broke mobile layouts --- */
    /* .doctor-page [class*="w-"] {
        width: 40vw !important;
        max-width: 160px !important;
        min-width: 100px !important;
    } */

    /* Specifically target speech bubble containers regardless of other classes */
    .doctor-page div[class*="speech-bubble-container"] {
        width: 40vw !important;
        max-width: 160px !important;
        min-width: 100px !important;
    }

    /* Global font-size scaling for doctor pages only */
    body.doctor-page {
        font-size: 0.93rem !important;  /* ~7% smaller */
        line-height: 1.45 !important;
    }

    /* Reduce inner padding so text blocks don't look too wide */
    .doctor-page .text-base,
    .doctor-page .text-lg,
    .doctor-page p {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Offset headline a touch downward so it sits visually centred */
    .doctor-page .speech-bubble-container h1,
    .doctor-page .speech-bubble-container.max-w-xs h1 {
        margin-top: 0.2rem !important; /* less offset since bubble is smaller */
    }

    /* Stretch speech bubbles vertically to fit two-line titles */
    .doctor-page .speech-bubble-container img,
    .doctor-page .speech-bubble-container.max-w-xs img {
        transform: scaleY(1.3) !important; /* stretch vertically */
        transform-origin: center center !important;
    }

    /* Hide clown characters near speech bubbles */
    .doctor-page .speech-bubble-container + div,
    .doctor-page .speech-bubble-container ~ div {
        display: none !important;
    }

    /* Tighten top spacing for main stacked flow */
    .doctor-page .content-wrapper {
        margin-top: 5rem !important; /* maximum space from top */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Remove leftover internal padding that was widening the bubbles */
    .doctor-page .speech-bubble-container,
    .doctor-page .speech-bubble-container.max-w-xs {
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Action buttons smaller so they don't poke outside bubble */
    .doctor-page .action-button img {
        width: 80px !important;
        height: 80px !important;
    }

    /* Force frame to stay within viewport on mobile */
    .doctor-page .frame-container {
        max-width: 100vw !important;
    }

    /* Ensure content doesn't overflow horizontally */
    .doctor-page .content-wrapper {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Ensure speech bubbles have enough space and aren't cut off */
    .doctor-page .content-wrapper {
        padding-top: 4rem !important; /* maximum top padding */
        padding-bottom: 1rem !important;
    }

    /* Force override any Tailwind width classes */
    .doctor-page .speech-bubble-container.w-full,
    .doctor-page .speech-bubble-container.max-w-xs.w-full {
        width: 40vw !important;
        max-width: 160px !important;
        min-width: 100px !important;
    }

    /* Force override any Tailwind max-width classes */
    .doctor-page .speech-bubble-container.max-w-xs,
    .doctor-page .speech-bubble-container.max-w-xs.max-w-xs {
        max-width: 160px !important;
        width: 40vw !important;
    }

    /* Most specific override for the exact class combination used in HTML */
    .doctor-page .content-wrapper .flex.flex-col.items-center.w-full.max-w-md .relative.mb-6.w-full.flex.justify-center .relative.w-full.max-w-xs.speech-bubble-container {
        width: 40vw !important;
        max-width: 160px !important;
        min-width: 100px !important;
    }

    /* Also target the parent container that might be constraining width */
    .doctor-page .content-wrapper .flex.flex-col.items-center.w-full.max-w-md {
        max-width: 100% !important;
    }
}

/* Desktop / landscape ≥1024px – show 3-column grid, hide stacked flow */
@media (orientation: landscape) and (min-width: 1024px) {
    .doctor-page .content-wrapper { display:none !important; }
    .doctor-page .desktop-grid   { display:block !important; }
    /* Ensure elements that poke outside bubble (e.g., red button) aren't clipped */
    .doctor-page .frame-content  { overflow: visible !important; }
    /* prevent clipping of floating photos */
    .doctor-page .frame-container { overflow: visible !important; }
}

/* Landscape photo wrapper so photos float above desktop grid */
.desktop-photo-layer {
    position: absolute; /* overlay so it doesn't push content */
    inset: 0;
    pointer-events: none; /* keep clicks on underlying content */
    z-index: 120; /* above nav buttons */
}

/* Ensure landscape photos always render above grid and nav buttons */
.desktop-photo-layer img {
    position: relative !important;
    z-index: 60 !important;
}

/* Always show blocks intended only for landscape orientation */
@media (orientation: landscape) {
    .landscape-only { display:block !important; }
}

/* Landscape doctor pages – suppress stray headings / buttons inside floating photo layer */
@media (orientation: landscape) and (min-width: 1024px) {
    .doctor-page .desktop-photo-layer h1,
    .doctor-page .desktop-photo-layer .action-button {
        display: none !important;
    }
}

/* DISABLED generic floating-photo positioning – handled individually per page
@media (orientation: landscape) and (min-width: 1024px) {
    .doctor-page .desktop-photo-layer > div:first-child {
        top: 50vh !important;
        transform: translateY(-50%) !important;
    }
    .doctor-page .desktop-photo-layer > div:last-child {
        bottom: var(--uf-frame-offset) !important;
        right:  calc(var(--uf-frame-offset) + 2rem) !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
}
*/

/* Mobile-only fine-tuning moved inside viewport query */

@media (max-aspect-ratio: 1.4), (max-width: 1024px), (max-height: 600px) {
  /* ── ADDITIONAL MOBILE POLISH ───────────────────────────────── */
  /* Slight scrapbook-like rotations for photos */
  .doctor-page .polaroid       { transform: rotate(-3deg) !important; }
  .doctor-page .cutout-photo   { transform: rotate(3deg) !important; }

  /* Smaller clown graphics with reduced padding */
  .doctor-page .content-wrapper img[alt*="Clown"] {
    width: 70px !important;
    height: auto !important;
    margin: 0.25rem 0 !important;
  }
  /* Alternate side placement for variety */
  .doctor-page .content-wrapper img[alt*="Clown"]:nth-of-type(even) { align-self:flex-end !important; }
  .doctor-page .content-wrapper img[alt*="Clown"]:nth-of-type(odd)  { align-self:flex-start !important; }

  /* Reduce stacked flow top margin */
  .doctor-page .content-wrapper { margin-top: 3.5rem !important; }

  /* Expand speech bubbles */
  .doctor-page .speech-bubble-container { padding: 0 1.5rem !important; }
  .doctor-page .speech-bubble-container img { transform: scaleY(1.45) !important; }
  /* ─────────────────────────────────────────────────────────────── */

  /* --- Final mobile overrides to ensure bubble sizing & margins --- */
  .doctor-page .content-wrapper { margin-top: 2.5rem !important; }

  /* Override earlier width:40vw rule */
  .doctor-page .content-wrapper .speech-bubble-container,
  .doctor-page .speech-bubble-container {
      width: auto !important;
      max-width: 90% !important;
  }
}

/* --- Fine-tune offsets (Jul-2025 #2) ----------------------------------- */
@media (orientation: landscape) and (min-width: 640px) {
  .nav-button.back-button  { left: 4rem !important; }
  .nav-button.home-button  { left: 7rem !important; }
}

@media (max-aspect-ratio: 1.4), (max-width: 1024px), (orientation: portrait) {
  .nav-button.back-button { top: 6rem !important; }
  .nav-button.home-button { top: 6rem !important; }
}

/* --- Mobile vertical stack + hide on homepage (Jul-2025 #3) ------------- */
body.homepage .nav-button { display:none !important; }

@media (max-aspect-ratio: 1.4), (max-width: 1024px) {
  .nav-button.back-button {
    top: 6rem !important;
    left: 2rem !important;
  }
  .nav-button.home-button {
    top: calc(6rem + var(--button-size)) !important; /* directly below back button */
    left: 2rem !important;
  }
}