/* Auto-mirrored toolkit tile layout — Marketing Studio is the source of truth.
 * Sales Toolkit copies this file via Admin Ingest / Sync (and scripts/sync_marketing_content.py).
 * Loaded AFTER main.css so these rules win for shared project-page tile behavior.
 */

/* Landscape tiles-only tabs: fill .app-main while the tab is active */
@media (orientation: landscape) and (min-width: 600px) {
  #panel-design.tab-panel.active,
  #panel-facilities.tab-panel.active,
  #panel-layouts.tab-panel.active,
  #panel-brochure.tab-panel.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }
}

/* Layouts landscape: 3×2 viewport; extra tiles scroll */
@media (orientation: landscape) and (min-width: 600px) {
  #panel-layouts .tab-panel-layout-tiles-only .tile-grid,
  #panel-layouts .tile-grid.tile-grid-fill {
    --tile-cols: 3 !important;
    --tile-rows: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    align-content: start !important;
  }
}

/* Project Vision landscape: tall hero left + remaining tiles 2×2, fill .app-main */
@media (orientation: landscape) and (min-width: 768px) {
  #panel-project .tab-panel-layout-hero-tiles,
  .tab-panel-layout-hero-tiles {
    display: grid !important;
    grid-template-columns: minmax(240px, 32%) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    flex-direction: unset !important;
    align-items: stretch !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #panel-project .tab-panel-layout-hero-tiles > .tab-aside,
  .tab-panel-layout-hero-tiles > .tab-aside,
  #panel-project .tab-panel-layout-hero-tiles > .tab-content,
  .tab-panel-layout-hero-tiles > .tab-content {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  #panel-project .tab-panel-layout-hero-tiles > .tab-aside,
  .tab-panel-layout-hero-tiles > .tab-aside {
    display: flex !important;
    flex-direction: column !important;
  }

  #panel-project .tab-panel-layout-hero-tiles > .tab-aside > .tab-hero,
  .tab-panel-layout-hero-tiles > .tab-aside > .tab-hero,
  #panel-project .tab-hero.tab-hero-branded {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
  }
}

/* Project Vision fill chain (tablet/desktop width) */
@media (min-width: 768px) {
  #panel-project.tab-panel.active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  #panel-project .tab-panel-layout-hero-tiles,
  .tab-panel-layout-hero-tiles {
    align-items: stretch;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #panel-project .tab-panel-layout-hero-tiles .tab-content,
  .tab-panel-layout-hero-tiles .tab-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    align-self: stretch;
    overflow: hidden;
  }

  #panel-project .tile-grid-hero-align,
  .tile-grid-hero-align {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(var(--tile-cols, 2), minmax(0, 1fr));
    grid-template-rows: repeat(var(--tile-rows, 2), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 0.7rem;
    align-content: stretch;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #panel-project .tile-grid-hero-align .explore-tile,
  #panel-project .tile-grid-hero-align .explore-tile-featured,
  .tile-grid-hero-align .explore-tile,
  .tile-grid-hero-align .explore-tile-featured {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .tile-grid.tile-grid-fill,
  .tab-panel-layout-tiles-only .tile-grid.tile-grid-fill {
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    align-content: stretch;
    justify-content: stretch;
    grid-template-columns: repeat(var(--tile-cols, 2), minmax(0, 1fr));
    grid-template-rows: repeat(var(--tile-rows, 1), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    padding: 0;
  }

  .tile-grid.tile-grid-fill .explore-tile,
  .tile-grid.tile-grid-fill .explore-tile-featured {
    aspect-ratio: unset !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  /* Sales flexible presets must not fight fill mode */
  .tile-grid-flexible.tile-grid-fill,
  .tab-panel-layout-tiles-only .tile-grid-flexible.tile-grid-fill {
    grid-auto-flow: row;
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    justify-content: stretch;
    overflow: hidden;
    padding: 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    flex: 1 1 auto;
  }

  .tile-grid-flexible.tile-grid-fill .explore-tile,
  .tile-grid-flexible.tile-grid-fill .explore-tile-featured,
  .tile-grid-flexible.tile-grid-fill .explore-tile-size-col1,
  .tile-grid-flexible.tile-grid-fill .explore-tile-size-col2,
  .tile-grid-flexible.tile-grid-fill .explore-tile-size-square,
  .tile-grid-flexible.tile-grid-fill .explore-tile-size-tall,
  .tile-grid-flexible.tile-grid-fill .explore-tile-size-wide,
  .tile-grid-flexible.tile-grid-fill .explore-tile-size-hero {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    aspect-ratio: unset !important;
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* About Project branded hero fills beside tiles — landscape only */
@media (orientation: landscape) and (min-width: 768px) {
  .tab-panel-layout:has(.tab-hero-branded) {
    align-items: stretch;
  }
  .tab-panel-layout:has(.tab-hero-branded) .tab-aside {
    align-self: stretch;
    display: flex;
  }
  .tab-panel-layout:has(.tab-hero-branded) .tab-hero-branded {
    flex: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/* Portrait / vertical: stack + scroll inside .app-main */
@media (orientation: portrait), (max-width: 767px) {
  .project-main.app-shell,
  .app-shell.is-agent,
  .app-shell {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .app-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
  }

  body.fg-body.project-workspace .project-main.app-shell,
  body.fg-body.project-workspace > .fg-agent-shell.has-tools-rail > .fg-agent-shell-main {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.fg-body.project-workspace .app-main {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #panel-project.tab-panel.active,
  .tab-panel.active {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }

  #panel-project .tab-panel-layout-hero-tiles,
  .tab-panel-layout-hero-tiles,
  .tab-panel-layout,
  .tab-panel-layout-tiles-only {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: stretch !important;
    align-content: start !important;
    gap: 0.7rem !important;
  }

  #panel-project .tab-aside,
  #panel-project .tab-content,
  .tab-aside,
  .tab-content {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  #panel-project .tab-hero.tab-hero-branded,
  .tab-hero.tab-hero-branded {
    container-type: inline-size !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 11 !important;
    height: auto !important;
    min-height: 180px !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #panel-project .tile-grid-hero-align,
  .tile-grid-hero-align,
  .tile-grid,
  .tile-grid.tile-grid-fill,
  .tab-panel-layout-tiles-only .tile-grid {
    --tile-cols: 1 !important;
    --tile-rows: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: minmax(180px, auto) !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
    align-content: start !important;
    gap: 0.7rem !important;
    padding: 0 !important;
  }

  #panel-project .tile-grid-hero-align .explore-tile,
  .tile-grid-hero-align .explore-tile,
  .tile-grid-hero-align .explore-tile-featured,
  .explore-tile,
  .explore-tile-featured {
    aspect-ratio: 16 / 11 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 180px !important;
    max-height: none !important;
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* Marketing Studio source of truth: no Explore chip on tiles */
.tile-cta {
  display: none !important;
}

/* E-brochure / PDF dives fill the overlay (page-width, white page) */
.dive-shell-immersive .dive-body:has(.dive-pdf-wrap),
.dive-shell-immersive .dive-body:has(.dive-pdf-bundle) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.dive-pdf-wrap,
.dive-pdf-bundle {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.dive-pdf,
.dive-shell-immersive .dive-pdf {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Touch devices: iframe PDF viewers only show the cover. Page canvases scroll. */
@media (hover: none), (pointer: coarse) {
  iframe.dive-pdf-native {
    display: none !important;
  }
}

.dive-pdf-wrap.is-paged {
  background: #fff;
  overflow: hidden;
}

.dive-pdf-pages {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  background: #fff;
}

.dive-pdf-page {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}

.dive-pdf-status {
  margin: 0.85rem 1rem;
  color: #1a1a1a;
  font-size: 0.9rem;
}

.dive-pdf-wrap.is-paged .dive-open-full {
  position: static;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0.35rem 0.85rem 0.65rem;
}

/* Gallery dives: compact title bar on the photo, not a coaching dump */
.dive-talking-points {
  display: none !important;
}

.dive-shell-immersive .dive-header {
  z-index: 6 !important;
  padding: 0.4rem 0.85rem 2.4rem !important;
  background: linear-gradient(
    180deg,
    rgba(var(--overlay-rgb), 0.94) 0%,
    rgba(var(--overlay-rgb), 0.62) 48%,
    transparent 100%
  ) !important;
}

.dive-shell-immersive .dive-header h2 {
  font-size: 0.95rem !important;
  color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

.dive-shell-immersive .dive-header p {
  font-size: 0.68rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.dive-gallery-preface {
  z-index: 3 !important;
}