/* ===========================
   Phone Video Reviews Block
   Clean / Clamp-first / Minimal breakpoints
   =========================== */

   .phone-reviews{
    /* Theme-able tokens */
    --pr-accent: #E30B5D;
    --pr-ink: var(--wp--preset--color--ink, #111);
    --pr-muted: #666;
  
    /* Layout + sizing */
    --pr-max: 1400px;
    --pr-gap: clamp(1rem, 2.5vw, 3rem);
  
    /* Card sizing (fluid, replaces multiple breakpoints) */
    --pr-card-w: clamp(260px, 22vw, 360px);
    --pr-card-w-land: clamp(360px, 38vw, 600px);
  
    /* Shell details */
    --pr-shell-radius: clamp(1.6rem, 2.2vw, 2.1rem);
    --pr-screen-radius: clamp(1.2rem, 1.8vw, 1.6rem);
  
    position: relative;
    padding-left:  var(--page-gutter-left, 1rem);
    padding-right: var(--page-gutter-right, 1rem);
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
  
    /* Prevent body horizontal scroll in carousel mode */
    overflow-x: clip;
  }
  
  /* Header */
  .phone-reviews__header{
    max-width: 56rem;
    margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  }
  
  .phone-reviews__title{
    margin: 0 0 .35rem;
    font-size: clamp(2rem, 3.4vw, 3.4375rem); /* ~32px → 55px */
    font-weight: 700;
    line-height: 1.1;
    color: #000;
  }
  
  .phone-reviews__title-accent{
    color: var(--pr-accent);
  }
  
  .phone-reviews__sub{
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.25rem);  /* ~16px → 20px */
    line-height: 1.5;
    color: var(--pr-muted);
  }
  
  /* ===========================
     Grid (desktop)
     =========================== */
  
  .phone-reviews__grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--pr-gap);
    max-width: var(--pr-max);
    margin: 0 auto;
  }
  
  /* Card wrapper */
  .phone-card{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 1200px;
    cursor: pointer;
  
    /* Fluid sizing (replaces multiple media queries) */
    flex: 1 1 var(--pr-card-w);
    max-width: var(--pr-card-w);
    width: 100%;
  }
  
  /* Landscape cards get a wider cap */
  .phone-card[data-aspect="landscape"]{
    flex-basis: var(--pr-card-w-land);
    max-width: var(--pr-card-w-land);
  }
  
  /* Phone shell – 3D look */
  .phone-card__shell{
    position: relative;
    width: 100%;
    aspect-ratio: 11 / 19.5;
    border-radius: var(--pr-shell-radius);
    background: radial-gradient(circle at 20% 0%, #444 0, #111 40%, #000 100%);
    padding: .44rem;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 260ms ease-out, box-shadow 260ms ease-out;
  }
  
  /* Landscape shell ratio */
  .phone-card[data-aspect="landscape"] .phone-card__shell{
    aspect-ratio: 16 / 9;
  }
  
  /* subtle highlight */
  .phone-card__shell::after{
    content: "";
    position: absolute;
    inset: 0.2rem;
    border-radius: inherit;
    background: linear-gradient(
      145deg,
      rgba(255,255,255,.16) 0%,
      transparent 35%,
      transparent 65%,
      rgba(0,0,0,.35) 100%
    );
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 1;
  }
  
  /* Notch */
  .phone-card__shell::before{
    content: "";
    position: absolute;
    top: .42rem;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: .4rem;
    border-radius: 999px;
    background: #000;
    z-index: 3;
  }
  
  /* Notch reposition for landscape */
  .phone-card[data-aspect="landscape"] .phone-card__shell::before{
    top: 50%;
    left: .42rem;
    transform: translateY(-50%);
    width: .4rem;
    height: 20%;
  }
  
  /* 3D tilt / flip feel */
  @media (hover: hover) and (pointer: fine) {
    .phone-card:hover .phone-card__shell{
      /* stronger "vertical flip" (rotateY) so it’s noticeable */
      transform: translateY(-8px) rotateX(1deg) rotateY(-10deg);
    }
  }

  /* Touch devices don’t have hover — add a quick press “flip” so it still animates */
  @media (hover: none) and (pointer: coarse) {
    .phone-card:active .phone-card__shell{
      transform: translateY(-4px) rotateY(-10deg);
    }
  }

  /* Prevent flicker on Safari/iOS when transforms happen */
  .phone-card__shell,
  .phone-card__screen{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
  }

  
  /* Screen area */
  .phone-card__screen{
    position: relative;
    flex: 1;
    border-radius: var(--pr-screen-radius);
    overflow: hidden;
    background: #000;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 0 0 30px rgba(0,0,0,.7);
    z-index: 2;
  }
  
  /* In-grid iframes should NOT catch clicks (modal opens via card click) */
  .phone-card__screen iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
  }
  
  /* Label */
  .phone-card__label{
    margin: .6rem 0 0;
    font-size: .95rem;
    line-height: 1.3;
    color: var(--pr-ink);
  }
  
  /* ===========================
     Play/Pause Toggle (YouTube only)
     - Clickable only when visible (hover or paused)
     =========================== */
  
  .phone-card__toggle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  
    /* JS controls opacity; keep it non-blocking when hidden */
    opacity: 0;
    pointer-events: none;
  
    transition: opacity 0.3s ease, transform 0.2s ease;
    z-index: 10;
  }
  
  .phone-card__toggle i{
    margin-left: 2px; /* optical tweak for play icon */
  }
  
  .phone-card__toggle i.fa-pause{
    margin-left: 0;
  }
  
  /* Allow click when user is hovering OR video is paused */
  .phone-card:hover .phone-card__toggle,
  .phone-card[data-video-state="paused"] .phone-card__toggle{
    pointer-events: auto;
  }
  
  /* Nice focus */
  .phone-card__toggle:focus-visible{
    outline: 3px solid rgba(255,255,255,.85);
    outline-offset: 3px;
  }
  
  /* ===========================
     Carousel mode (<=1240px)
     Keep ONLY this breakpoint — layout actually changes here.
     =========================== */
  
  @media (max-width: 1240px){
    .phone-reviews__grid{
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
  
      /* Center cards in the viewport a bit */
      padding-inline: clamp(1rem, 10vw, 12vw);
      scroll-padding-inline: clamp(1rem, 10vw, 12vw);
  
      /* Make gaps slightly tighter on smaller screens */
      gap: clamp(1rem, 4vw, 1.75rem);
  
      scrollbar-width: none;     /* Firefox */
      -ms-overflow-style: none;  /* IE/Edge legacy */
    }
  
    .phone-reviews__grid::-webkit-scrollbar{
      display: none;
    }
  
    .phone-card{
      flex: 0 0 50%;
      max-width: none;
      scroll-snap-align: center;
    }
  
    /* Limit shell width so it feels like a centered “phone” */
    .phone-card__shell{
      width: min(320px, 78vw);
      margin-inline: auto;
    }
  
    /* Landscape gets more width */
    .phone-card[data-aspect="landscape"] .phone-card__shell{
      width: min(720px, 92vw);
    }
  }

  /* Small screens: show 1 card per swipe (avoid cards getting too close) */
  @media (max-width: 520px){
    .phone-reviews__grid{
      padding-inline: 1rem;
      scroll-padding-inline: 1rem;
      gap: 1.25rem;
    }

    .phone-card{
      flex: 0 0 88%;
    }

    .phone-card__shell{
      width: min(320px, 88vw);
    }

    .phone-card[data-aspect="landscape"] .phone-card__shell{
      width: min(720px, 94vw);
    }
  }

  /* Extra small (≈376px): make cards smaller so they don’t feel cramped */
  @media (max-width: 400px){
    .phone-reviews__grid{
      padding-inline: 0.75rem;
      scroll-padding-inline: 0.75rem;
      gap: 1.5rem;
    }

    .phone-card{
      flex: 0 0 82%;
    }

    .phone-card__shell{
      width: min(285px, 82vw);
    }

    .phone-card[data-aspect="landscape"] .phone-card__shell{
      width: min(680px, 94vw);
    }
  }
  
  /* ===========================
     Cinematic overlay (modal)
     =========================== */
  
  .phone-reviews__overlay{
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1400px;
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
    transition: opacity 240ms ease-out, visibility 0s linear 240ms;
    /* Must be above sticky header (header is ~1000) */
    z-index: 100000;
  }
  
  .phone-reviews__overlay.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 240ms ease-out, visibility 0s linear 0s;
  }
  
  .phone-reviews__overlay-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
  }
  
  .phone-reviews__overlay-shell{
    position: relative;
    border-radius: 2rem;
    background: radial-gradient(circle at 20% 0%, #444 0, #111 40%, #000 100%);
    padding: .6rem;
    box-shadow:
      0 30px 80px rgba(0,0,0,.85),
      0 0 0 1px rgba(255,255,255,.08);
    overflow: hidden;
    transform-origin: center center;
    display: flex;
    flex-direction: column;
  
    /* Smooth entrance */
    /* Start "horizontal" then flip upright when modal opens */
    transform: translateY(10px) scale(.96) rotateX(78deg);
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 420ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }
  
  /* Aspect sizing */
  .phone-reviews__overlay-shell[data-aspect="portrait"]{
    width: min(62vw, 380px);
    aspect-ratio: 10 / 19.5;
    max-height: 86vh;
  }
  
  .phone-reviews__overlay-shell[data-aspect="landscape"]{
    width: min(92vw, 980px);
    aspect-ratio: 19.5 / 9;
    max-height: 86vh;
  }
  
  .phone-reviews__overlay.is-open .phone-reviews__overlay-shell{
    transform: translateY(0) scale(1) rotateX(0deg);
  }
  
  .phone-reviews__overlay-screen{
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #000;
  }
  
  .phone-reviews__overlay-screen iframe{
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  
    /* In overlay the iframe must be interactive */
    pointer-events: auto;
  }
  
  /* Title */
  .phone-reviews__overlay-label{
    margin: .75rem 0 0;
    text-align: center;
    font-size: .95rem;
    line-height: 1.3;
    color: #f3f3f3;
  }
  
  /* Close button */
  .phone-reviews__overlay-close{
    position: absolute;
    top: .75rem;
    right: .9rem;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: none;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }
  
  .phone-reviews__overlay-close:focus-visible{
    outline: 3px solid rgba(255,255,255,.85);
    outline-offset: 3px;
  }
  
  /* Lock page scroll when overlay is open */
  html.phone-reviews--overlay-open{
    overflow: hidden;
  }
  
  /* Mobile overlay: full bleed */
  @media (max-width: 768px){
    .phone-reviews__overlay-backdrop{
      background: #000;
      backdrop-filter: none;
    }

    .phone-reviews__overlay-shell{
      width: 100vw;
      height: 100vh;
      max-height: none;
      border-radius: 0;
      padding: 0;
      background: #000;
      box-shadow: none;
    }

    /* Override aspect sizing rules (these are more specific selectors) */
    .phone-reviews__overlay-shell[data-aspect="portrait"],
    .phone-reviews__overlay-shell[data-aspect="landscape"]{
      width: 100vw;
      height: 100vh;
      max-height: none;
      aspect-ratio: auto;
    }
  
    .phone-reviews__overlay-screen{
      border-radius: 0;
      width: 100%;
      height: 100%;
    }

    /* Fullscreen player feel: hide label */
    .phone-reviews__overlay-label{
      display: none;
    }

    /* Respect safe-areas (iOS notch) */
    .phone-reviews__overlay-close{
      top: calc(.75rem + env(safe-area-inset-top, 0px));
      right: calc(.9rem + env(safe-area-inset-right, 0px));
    }
  }
  
  /* Reduce motion */
  @media (prefers-reduced-motion: reduce){
    .phone-card__shell,
    .phone-reviews__overlay,
    .phone-reviews__overlay-shell{
      transition: none !important;
    }

    .phone-reviews__overlay-shell{
      transform: none !important;
    }
  }