/* Extracted from resources/views/pages/home-test.blade.php */

body { font-family: 'Inter', sans-serif; }

    :root{
      --badge-size: 210px;
      --badge-top:  132px;
      --badge-left: 58%;

      --events-pad-x: 18px;
      --events-gap:   56px;

      --events-img-w: 600px;
      --events-img-h: 360px;

      --reveal-ms: 1100ms;
      --reveal-delay: 140ms;
      --reveal-ease: cubic-bezier(.16,.84,.44,1);

      --anniv-nudge: 50px;

      --ot-mobile-card-max: 320px;
    }
    @media (max-width: 1023.98px){
      :root{
        --events-pad-x: 16px;
        --events-gap:   20px;
      }
    }

    html, body {
      overflow-x: hidden;
      overscroll-behavior-y: none; 
    }

    /* ------------ HERO TYPOGRAPHY ------------ */
    .hero-heading{
      font-weight: 200; text-transform: uppercase; font-size: 32px;
      line-height: 1.15; letter-spacing: .02em;
    }
    .hero-body{
      font-weight: 200; font-size: 18px; line-height: 1.35;
    }

    /* ------------ HERO GRADIENT OVERLAY ------------ */
    .hero-overlay{
      position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(
        to bottom,
        rgba(0,0,0,1.00) 0%,
        rgba(0,0,0,0.98) 10%,
        rgba(0,0,0,0.92) 14%,
        rgba(0,0,0,0.80) 17%,
        rgba(0,0,0,0.60) 20%,
        rgba(0,0,0,0.42) 26%,
        rgba(0,0,0,0.24) 44%,
        rgba(0,0,0,0.12) 48%,
        rgba(0,0,0,0.00) 53%,
        rgba(0,0,0,0.00) 100%
      );
    }

    /* ========= Signature Carousel ========= */
    :root{
      --sig-w: 420px;
      --sig-h-side: 380px;
      --sig-h-main: 560px;
      --sig-gap: 24px;
      --sig-radius: 5px;
      --sig-title-h: 44px;
      --sig-side-offset: 56px;
      --sig-media-h: 300px;
      --sig-media-radius: 4px;
      --sig-title-size: 0.90rem;
      --sig-desc-size:  0.98rem;
      --sig-ease: cubic-bezier(.22,.61,.36,1);
      --sig-ms: 640ms;
    }

    .sig-mobile-cta { display:none; }
    .sig-mobile-hud { display:none; }
    .sig-dots { display:none; }

    .hero { padding-top: 3rem; padding-bottom: 3rem; background-size: cover; background-position: center; }

    .sig-stage{ position:relative; width:100vw; left:50%; transform:translateX(-50%); margin-top: 1.25rem; }
    .sig-rail { position:relative; overflow:visible; width:100%; height: var(--sig-h-main); }
    .sig-track{
      display:flex; align-items:flex-start; gap: var(--sig-gap);
      height: 100%;
      will-change: transform;
      transition: transform var(--sig-ms) var(--sig-ease);
      padding: 0 var(--sig-gap);
      touch-action: pan-y;
    }
    .sig-track.no-animate { transition: none !important; }
    .sig-track.no-animate .sig-card,
    .sig-track.no-animate .sig-media { transition: none !important; }

    .sig-card{
      position: relative; flex:0 0 auto; width: var(--sig-w);
      border-radius: 5px;
      background: rgba(255,255,255,.92);
      box-shadow: 0 6px 18px rgba(0,0,0,.16);
      overflow: visible; transform: translateY(0) scale(.94);
      opacity: .9;
      transition:
        transform var(--sig-ms) var(--sig-ease),
        opacity   var(--sig-ms) var(--sig-ease),
        box-shadow var(--sig-ms) var(--sig-ease),
        height    var(--sig-ms) var(--sig-ease);
    }
    .sig-card.is-side{ height: var(--sig-h-side); transform: translateY(var(--sig-side-offset)) scale(.94); opacity: .85; z-index: 1; }
    .sig-card.is-center{ height: var(--sig-h-main); transform: translateY(0) scale(1); background:#fff; box-shadow: 0 12px 28px rgba(0,0,0,.20); z-index: 2; opacity: 1; display: block; }
    .sig-title{
      height: 44px; display:flex; align-items:center; justify-content:center;
      text-transform:uppercase; letter-spacing:.06em;
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-weight: 500; font-size: 0.90rem; color:#1f2937; text-align:center; padding: 0 12px;
      border-top-left-radius: 5px; border-top-right-radius: 5px;
    }
    .sig-media{
      display:block; width: calc(100% - 24px); margin: 0 12px;
      height: 300px; object-fit: cover; object-position: center; border-radius: 4px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); background: #f7f7f7; transform: scale(.985);
      transition: transform var(--sig-ms) var(--sig-ease);
    }
    .sig-card.is-center .sig-media{ transform: scale(1); }
    .sig-body{ text-align:center; padding: 12px 18px 18px; }
    .sig-desc{ font-size: 0.98rem; line-height: 1.5; color:#111827; }
    .sig-cta{
      display:inline-block; margin-top:14px; padding:10px 18px;
      border-radius:9999px; background:#0f172a; color:#fff; font-size:.9rem;
      transition: transform .15s ease, background .15s ease;
    }
    .sig-cta:hover{ transform: translateY(-1px); background:#111827; }
    .sig-card.is-side .sig-body{ display:none; }

    .sig-crest{ display:flex; justify-content:center; margin-top:12px; }
    .sig-crest-img{ height: 45px; width:auto; opacity:.9; }
    .sig-card.is-center .sig-body{ position: relative; }
    .sig-card.is-center .sig-crest{
      position: absolute; left: 50%; transform: translate(-50%, 16px); margin-top:  0;
    }

    .sig-pager{ margin-top:14px; display:flex; align-items:center; justify-content:center; gap: 18px; color:#fff; font-weight:600; user-select:none; font-size:.95rem; }
    .sig-count { min-width: 70px; text-align:center; letter-spacing:.02em; }
    .sig-arrow{ display:inline-flex; align-items:center; justify-content:center; width: 28px; height: 28px; border:0; background:none; padding:0; cursor:pointer; }
    .sig-arrow svg{ width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.25; fill: none; }

    .ot-badge{ display:none; }
      
    .sig-card.is-side{
    opacity: 1 !important;
    background: #ffffff !important;
    }

    /* ------ Mobile overrides + force HUD back ------ */
    @media (max-width: 767.98px){
      :root{ --sig-gap-m: 12px; --sig-hm: 390px; --sig-media-h-m: 235px; }
      .sig-stage{ width:100%; left:0; transform:none; margin-top: 1rem; }
      .sig-rail{ position:relative; height: var(--sig-hm); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 calc(var(--sig-gap-m) / 2); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: auto; }
      .sig-rail::-webkit-scrollbar{ display:none; }
      .sig-track{ display:flex; align-items:stretch; height: 100%; gap: var(--sig-gap-m); padding-left: calc(var(--sig-gap-m) / 2); padding-right: calc(var(--sig-gap-m) / 2); transition: none; touch-action: auto !important; }
      .sig-card{ flex: 0 0 calc(100% - var(--sig-gap-m)); width: calc(100% - var(--sig-gap-m)); height: var(--sig-hm); scroll-snap-align: center; scroll-snap-stop: always; transform: none; opacity: 1; box-shadow: 0 6px 16px rgba(0,0,0,.14); display:flex; flex-direction:column; justify-content:flex-start; }
      .sig-card.is-side, .sig-card.is-center{ height: var(--sig-hm); transform:none; opacity:1; }
      .sig-title{ height: 40px; }
      .sig-media{ height: var(--sig-media-h-m); }
      .sig-card .sig-body{ display:block !important; padding: 10px 18px 8px; }
      .sig-cta{ display:inline-flex; }
      .sig-pager{ display:none; }

      .sig-mobile-hud{ display:block !important; position:absolute; top: 8px; right: 10px; z-index:5; pointer-events:none; }
      .sig-count-pill{ display:inline-flex; align-items:center; justify-content:center; padding: 3px 8px; border-radius:9999px; background: rgba(15,23,42,.72); color:#fff; font-weight:600; font-size:12px; letter-spacing:.02em; }
      .sig-dots{ display:flex !important; align-items:center; justify-content:center; gap:6px; position:absolute; left:50%; transform: translateX(-50%); bottom: 12px; z-index:5; pointer-events:none; width:max-content; }
      .sig-dot{ width:6px; height:6px; border-radius:9999px; background: rgba(17,24,39,.32); transition: background .2s ease, transform .2s ease; }
      .sig-dot.is-active{ background: rgba(17,24,39,.9); transform: scale(1.12); }
      .sig-mobile-cta{ display:flex; justify-content:center; margin-top: 10px; }
    }

    /* ===================== MOBILE-ONLY HERO COPY OVERRIDES ===================== */
    @media (max-width: 767.98px){
      .hero-copy{ text-align: center !important; }
      .hero-heading, .hero-body{ text-align: center !important; }

      .hero-body{ font-size: 0 !important; line-height: 0 !important; position: relative; }
      .hero-body::after{
        content: "For 50 years, La Famiglia Ristorante has defined elegant Italian dining in Philadelphia.";
        display: block; font-weight: 200; font-size: 16px; line-height: 1.35; text-align: center;
      }
      .hero-heading{ font-size: 0 !important; line-height: 0 !important; position: relative; }
      .hero-heading::after{
        content: "PHILLY'S TEMPLE OF FINE ITALIAN CUISINE";
        display: block; font-weight: 200; text-transform: uppercase; font-size: 24px; line-height: 1.15; letter-spacing: .02em; text-align: center;
      }
    }
    @media (min-width: 768px){
      .hero-heading::after, .hero-body::after{ content: none !important; }
      .hero-heading{ font-size: 32px !important; line-height: 1.15 !important; text-align: left !important; }
      .hero-body{ font-size: 18px !important; line-height: 1.35 !important; text-align: left !important; }
    }

    /* Events band – two columns (TEXT LEFT, IMAGE RIGHT) */
    #events .inner { padding-left: var(--events-pad-x); padding-right: var(--events-pad-x); }
    #events .events-grid { row-gap: 24px; }
    @media (min-width: 1024px){
      #events .events-grid { grid-template-columns: 1fr auto; column-gap: var(--events-gap); align-items: center; }
      #events .left-img { width: var(--events-img-w); height: var(--events-img-h); }
      #events .events-title { white-space: nowrap; }
      #events .events-copy  { max-width: 34ch; }
    }
    #events .img-box img{ width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); display:block; }

    /* Hospitality band (two columns) */
    #hospitality .inner { padding-left: var(--events-pad-x); padding-right: var(--events-pad-x); }
    @media (min-width: 1024px){
      #hospitality .grid-cols { grid-template-columns: 1fr auto; column-gap: var(--events-gap); align-items: center; }
      #hospitality .right-img { width: var(--events-img-w); height: var(--events-img-h); }
      #hospitality .hosp-copy { max-width: 42ch; }
    }
    #hospitality .img-box img{ width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 8px; box-shadow: 0 4px 18px rgba(0,0,0,.18); display:block; }

    /* ========= HERO + EVENTS + SLIDESHOW + CAROUSEL ENTRANCE ANIMATIONS ========= */
    .hero-copy{ position: relative; }
    .hero-anniv{ position: relative; }
    .events-entrance{ position: relative; }
    .winecellar-entrance{ position: relative; }
    .hospitality-entrance{ position: relative; } /* new */

    /* Desktop-only start states */
    @media (min-width: 1024px) and (prefers-reduced-motion: no-preference){
      #events .events-entrance { opacity: 0; }
      #slideshowDesktop.slideshow-entrance { opacity: 0; transform: translate3d(-100px, 0, 0); }
      #signatureCarousel.carousel-entrance { opacity: 0; transform: translate3d(-100px, 0, 0); }
      /* wine cellar starts hidden (slides in from left) */
      #wine-cellar .winecellar-entrance { opacity: 0; }
      /* hospitality starts hidden (slides in from right) */
      #hospitality .hospitality-entrance { opacity: 0; }
    }

    @media (prefers-reduced-motion: no-preference){
      .hero-copy.play{
        transform: translate3d(calc(-1 * var(--hero-copy-offset, 0px)), 0, 0);
        opacity: 0;
        will-change: transform, opacity;
        animation: hero-slide-in var(--reveal-ms) var(--reveal-ease) var(--reveal-delay) forwards;
      }
      .hero-anniv.play{
        transform: translate3d(var(--hero-anniv-offset, 0px), 0, 0);
        opacity: 0;
        will-change: transform, opacity;
        animation: hero-slide-in-right var(--reveal-ms) var(--reveal-ease) var(--reveal-delay) forwards;
      }
      .events-entrance.play{
        transform: translate3d(calc(-1 * var(--events-offset, 0px)), 0, 0);
        opacity: 0;
        will-change: transform, opacity;
        animation: hero-slide-in var(--reveal-ms) var(--reveal-ease) var(--reveal-delay) forwards;
      }

      /* Wine cellar entrance (same as events: from left) */
      .winecellar-entrance.play{
        transform: translate3d(calc(-1 * var(--events-offset, 0px)), 0, 0);
        opacity: 0;
        will-change: transform, opacity;
        animation: hero-slide-in var(--reveal-ms) var(--reveal-ease) var(--reveal-delay) forwards;
      }

      /* Slideshow entrance */
      #slideshowDesktop.slideshow-entrance.play{
        will-change: transform, opacity;
        animation: slideshow-nudge var(--reveal-ms, 900ms) var(--reveal-ease, cubic-bezier(.16,.84,.44,1)) 80ms forwards;
      }
      @keyframes slideshow-nudge{ to{ transform: translate3d(0,0,0); opacity: 1; } }

      /* Carousel entrance */
      #signatureCarousel.carousel-entrance.play{
        will-change: transform, opacity;
        animation: carousel-nudge var(--reveal-ms, 900ms) var(--reveal-ease, cubic-bezier(.16,.84,.44,1)) 80ms forwards;
      }
      @keyframes carousel-nudge{ to{ transform: translate3d(0,0,0); opacity: 1; } }

      /* Hospitality entrance (from right) */
      #hospitality .hospitality-entrance.play{
        transform: translate3d(var(--hosp-offset, 0px), 0, 0);
        opacity: 0;
        will-change: transform, opacity;
        animation: hospitality-slide-in var(--reveal-ms) var(--reveal-ease) var(--reveal-delay) forwards;
      }
      @keyframes hospitality-slide-in{ to{ transform: translate3d(0,0,0); opacity: 1; } }

      @keyframes hero-slide-in{ to{ transform: translate3d(0,0,0); opacity: 1; } }
      @keyframes hero-slide-in-right{ to{ transform: translate3d(calc(-1 * var(--anniv-nudge, 100px)), 0, 0); opacity: 1; } }
    }

    /* ====================== OpenTable MOBILE container cap (iframe=true) ====================== */
    #otMobileShell{ display:none; }
    @media (max-width: 767.98px){
      #otMobileShell{
        display:block;
        width:auto;
        margin-left:100px; 
        margin-right:auto;
      }
      #otMobileFrame{
        display:block;
        width: var(--ot-mobile-card-max);
        max-width: calc(100vw - 32px);
        margin-left:auto;
        margin-right:auto;
      }
      #otMobileFrame iframe{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        border:0;
      }

      /* NEW: slightly reduce space under the mobile OT stack */
      #menus .md\:hidden .mb-2{ margin-bottom: .5rem !important; } /* was ~0.5rem? enforce tighter */
      /* If you want even tighter, use .25rem: margin-bottom: .25rem !important; */
    }

/* Stable 16:9 frame at all sizes */
    #hours-location .map-frame{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 0.5rem;
    }
    #hours-location .map-frame > img{
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display:block;
    }

/* Mobile-only slideshow tuning */
    @media (max-width: 767.98px){
      :root{
        --slide-h-m: 56vw;
      }

      /* Slide frames (generic across slider libs) */
      #slideshowDesktop .slide-media,
      #slideshowDesktop .slide,
      #slideshowDesktop .glide__slide,
      #slideshowDesktop .swiper-slide,
      #slideshowDesktop .splide__slide{
        height: var(--slide-h-m) !important;
        background: #0b1220;
        width: auto !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      #slideshowDesktop .slide-media > img,
      #slideshowDesktop .slide > img,
      #slideshowDesktop .glide__slide img,
      #slideshowDesktop .swiper-slide img,
      #slideshowDesktop .splide__slide img,
      #slideshowDesktop img[data-role="slide"]{
        display:block !important;
        width: 100% !important;
        height: var(--slide-h-m) !important;
        object-fit: cover !important;
        object-position: center !important;
        background: #0b1220;
      }

      #slideshowDesktop img.is-portrait{
        object-fit: contain !important;
      }

      #slideshowDesktop .variable-width{
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: 100vw !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      #slideshowDesktop .btn-fullscreen,
      #slideshowDesktop .control-fullscreen,
      #slideshowDesktop [data-action="fullscreen"],
      #slideshowDesktop button[aria-label*="Full"],
      #slideshowDesktop a[aria-label*="Full"],
      #slideshowDesktop [class*="fullscreen"]{
        display: none !important;
      }
    }

@media (max-width: 767.98px){
          #menus{ padding-bottom: 0 !important; }
          #menus + *{ margin-top: 0 !important; }
        }

.js-required{display:block!important}