/* ==========================================================================
   BODENWALKER — FOLDABLE & DUAL-SCREEN OPTIMIZATIONS (FOLDABLES.CSS)
   Targeted for Microsoft Surface Duo, Galaxy Z Fold, Pixel Fold & Spanned Views
   Using W3C Viewport Segments & Screen Spanning Media Queries
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HORIZONTAL DUAL SCREEN (Two screens side-by-side with a vertical hinge)
   Supported via modern 'horizontal-viewport-segments: 2' and legacy 'screen-spanning: single-fold-vertical'
   -------------------------------------------------------------------------- */
@media (horizontal-viewport-segments: 2), (screen-spanning: single-fold-vertical) {
  :root {
    --fold-hinge-width: calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-width 0 0, 50vw));
  }

  body {
    padding-bottom: 0; /* Dual screens have ample height, bottom nav can float cleanly */
  }

  .wrap {
    max-width: 100%;
    padding: 0 env(viewport-segment-left 0 0, 24px);
  }

  /* Spanned Homepage Layout: Left screen is Discovery & Showcase, Right screen is Catalog */
  #homeView {
    display: grid;
    grid-template-columns: env(viewport-segment-width 0 0, 1fr) env(viewport-segment-width 1 0, 1fr);
    column-gap: calc(env(viewport-segment-left 1 0, 100vw) - env(viewport-segment-width 0 0, 50vw));
    padding: 10px 0;
  }

  /* Place hero top, categories, recommendations and promos on Left Screen (Segment 0) */
  .hero-top,
  .categories,
  .hero-banner,
  .trust-strip,
  .recommendations-section,
  .drops,
  .promo-band {
    grid-column: 1 / 2;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Place the Main Catalog Grid and Filters on Right Screen (Segment 1) */
  .featured.wrap#featured {
    grid-column: 2 / 3;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
  }

  .featured .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Product Detail Page (PDP) Spanned Layout:
     Left Screen: Media Showcase & Thumbnails
     Right Screen: Product Details, Specs, Actions & Checkout triggers */
  .pdp {
    display: grid !important;
    grid-template-columns: env(viewport-segment-width 0 0, 1fr) env(viewport-segment-width 1 0, 1fr) !important;
    column-gap: calc(env(viewport-segment-left 1 0, 100vw) - env(viewport-segment-width 0 0, 50vw)) !important;
    align-items: start;
    padding: 20px 24px !important;
  }

  .pdp-media-wrap {
    grid-column: 1 / 2;
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }

  .pdp-info {
    grid-column: 2 / 3;
    padding-top: 10px;
  }

  .details-block, #relatedSection {
    grid-column: 2 / 3;
  }

  /* Direct Checkout Modal Spanned Layout:
     Left Screen: Order Summary & Item list
     Right Screen: Shipping & Razorpay Payment details */
  .modal-box.wide {
    max-width: 96vw;
    width: 96vw;
  }

  .checkout-grid {
    display: grid !important;
    grid-template-columns: env(viewport-segment-width 0 0, 1fr) env(viewport-segment-width 1 0, 1fr) !important;
    column-gap: calc(env(viewport-segment-left 1 0, 100vw) - env(viewport-segment-width 0 0, 50vw)) !important;
  }

  .checkout-summary-column {
    grid-column: 1 / 2;
  }

  .checkout-form-column {
    grid-column: 2 / 3;
  }

  /* Cart Drawer when open on Dual-Screen: Occupies the right segment cleanly */
  .cart-drawer {
    width: env(viewport-segment-width 1 0, 480px);
    max-width: 50vw;
  }
}

/* --------------------------------------------------------------------------
   2. VERTICAL DUAL SCREEN (Laptop / Book / Tent mode with a horizontal hinge)
   Supported via modern 'vertical-viewport-segments: 2' and legacy 'screen-spanning: single-fold-horizontal'
   -------------------------------------------------------------------------- */
@media (vertical-viewport-segments: 2), (screen-spanning: single-fold-horizontal) {
  /* Upper segment: Visual presentation; Lower segment: interactive controls */
  .pdp-media-wrap {
    max-height: env(viewport-segment-height 0 0, 45vh);
  }

  .pdp-media {
    max-height: calc(env(viewport-segment-height 0 0, 45vh) - 80px);
  }

  .pdp-info {
    margin-top: calc(env(viewport-segment-top 0 1, 50vh) - env(viewport-segment-height 0 0, 50vh) + 16px);
  }

  .bottom-nav {
    bottom: env(safe-area-inset-bottom, 0);
  }
}

/* --------------------------------------------------------------------------
   3. SAFE ENVIRONMENT VARIABLES & ULTRA-COMPATIBILITY FALLBACKS
   -------------------------------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0);
  }

  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0));
  }
}