/* The DetailBook phone mockup.

   Extracted from styles.css so pages on the current design system can use it
   without loading the legacy stylesheet. It is a PRODUCTION COMPONENT: no
   generated or reference stylesheet may redefine .db-iphone, .db-screen,
   .db-bezel or any of the buttons, and a collision is fixed by removing the
   conflicting rule at source, never by stacking an override here.

   Sizing is the unitless --ph-scale (1 = 420px wide, aspect 420/869). Every
   inset, radius and button dimension scales off it, so proportions hold at any
   size. To resize a phone, set --ph-scale on it. Never set width. */

/* ===== Shared iPhone mockup frame — titanium rail, side buttons, bezel =====
           Same construction as the .fx-iphone frames on features.html. One class,
           sized by the unitless --ph-scale (1 = 420px wide); every inset, radius and
           button dimension scales off it, so proportions hold at any size.
           No dynamic-island overlay: the screen media already has a real one baked in.
           Aspect ratio matches the 0.46 portrait footage/screenshots, so nothing crops. */
        .db-iphone {
            --ph-scale: 1;
            position: relative;
            /* Sized from --ph-scale, not from the parent. A percentage width needs a
               parent of definite width, and both placements are shrink-to-fit — the
               hero frame is a flex item, the showcase frame a grid item with auto
               margins — so width:100% collapsed them to their content (0 and 82px).
               max-width keeps it fluid inside anything narrower, e.g. small phones. */
            width: calc(420px * var(--ph-scale));
            max-width: 100%;
            aspect-ratio: 420 / 869;
        }

.db-iphone .db-rail {
            position: absolute;
            inset: 0;
            border-radius: calc(75px * var(--ph-scale));
            background: linear-gradient(135deg, #52555c, #1a1b1f 23%, #2e3035 50%, #141519 77%, #45484f);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.22);
        }

.db-iphone .db-ibtn {
            position: absolute;
            width: calc(5px * var(--ph-scale));
            border-radius: 2px;
        }

.db-iphone .db-action {
            left: calc(-4px * var(--ph-scale));
            top: 22.2%;
            height: 7%;
            background: linear-gradient(90deg, #3a3d44, #17181c);
        }

.db-iphone .db-volup {
            left: calc(-4px * var(--ph-scale));
            top: 31.4%;
            height: 10.8%;
            background: linear-gradient(90deg, #3a3d44, #17181c);
        }

.db-iphone .db-voldn {
            left: calc(-4px * var(--ph-scale));
            top: 44.3%;
            height: 10.8%;
            background: linear-gradient(90deg, #3a3d44, #17181c);
        }

.db-iphone .db-power {
            right: calc(-4px * var(--ph-scale));
            top: 29.3%;
            height: 13.8%;
            background: linear-gradient(270deg, #3a3d44, #17181c);
        }

.db-iphone .db-bezel {
            position: absolute;
            inset: calc(8px * var(--ph-scale));
            border-radius: calc(66px * var(--ph-scale));
            background: #050609;
        }

.db-iphone .db-screen {
            position: absolute;
            inset: calc(18px * var(--ph-scale));
            border-radius: calc(54px * var(--ph-scale));
            overflow: hidden;
            background: #050609;
        }

.db-iphone .db-screen img,
        .db-iphone .db-screen video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 0 !important;
        }

.db-iphone .hero-poster-overlay {
            z-index: 1;
            transition: opacity 0.5s ease;
        }

/* Showcase frame sits at 340px — the width the old .sms-phone used. */
        .showcase .db-iphone {
            --ph-scale: 0.81;
            margin: 0 auto;
            filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.18));
        }

/* Showcase sits on white and gets its shadow from the wrapper's drop-shadow,
           so the rail's own heavy shadow is dropped there. */
        .showcase .db-iphone .db-rail {
            box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.22);
        }

/* Auto-crossfade slideshow inside a frame. No dots, arrows or swipe —
           this is a passive tease that replaces a looping video, not a carousel. */
        .db-slides {
            position: absolute;
            inset: 0;
        }

.db-slides img {
            opacity: 0;
            transition: opacity 0.8s ease;
            z-index: 0;
        }

.db-slides img.is-active {
            opacity: 1;
            z-index: 1;
        }

.db-slide-label {
            margin-top: 1rem;
            text-align: center;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #667eea;
            transition: opacity 0.35s ease;
            min-height: 1.2em;
        }

@media (prefers-reduced-motion: reduce) {
  .db-slides img {
                transition: none;
            }
}

@media (max-width: 768px) {
  /* One number resizes the whole frame: 0.714 x 420px = 300px. */
            .hero-demo .db-iphone {
                --ph-scale: 0.714;
            }
}