/* v40: wider desktop pages, 8-column tile grid, image fit controls, full-screen welcome. */

@media (min-width: 981px) {
  .page-shell,
  body #app-shell .page-shell,
  main.page-shell,
  .public-page,
  .page-content {
    width: min(1680px, calc(100% - 36px)) !important;
    max-width: 1680px !important;
  }

  .tiles-grid,
  body .tiles-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(118px, auto) !important;
    gap: 10px !important;
  }

  .tile-span-w-1 { grid-column: span 1; }
  .tile-span-w-2 { grid-column: span 2; }
  .tile-span-w-3 { grid-column: span 3; }
  .tile-span-w-4 { grid-column: span 4; }
  .tile-span-w-5 { grid-column: span 5; }
  .tile-span-w-6 { grid-column: span 6; }
  .tile-span-w-7 { grid-column: span 7; }
  .tile-span-w-8 { grid-column: span 8; }
}

@media (min-width: 1500px) {
  .tile { min-height: 118px !important; padding: 15px !important; }
  .tile h3 { font-size: 17px !important; }
  .tile p { font-size: 13px !important; line-height: 1.38 !important; }
}

/* Image fitting: cover = fills the area; contain = whole image visible. */
.image-fit-contain img,
img.image-fit-contain,
.block.image-fit-contain img,
.content-card.image-fit-contain img,
.content-detail.image-fit-contain img,
.tile.image-fit-contain .tile-picture,
.tile-image-fit-contain .tile-picture,
.tile-image-fit-contain .tile-image,
.editor-tile-image.image-fit-contain,
.editor-tile .image-fit-contain {
  object-fit: contain !important;
  background: rgba(255,255,255,.72) !important;
}

.image-fit-cover img,
img.image-fit-cover,
.block.image-fit-cover img,
.content-card.image-fit-cover img,
.content-detail.image-fit-cover img,
.tile.image-fit-cover .tile-picture,
.tile-image-fit-cover .tile-picture,
.tile-image-fit-cover .tile-image,
.editor-tile-image.image-fit-cover,
.editor-tile .image-fit-cover {
  object-fit: cover !important;
}

.content-card > img,
.news-card > img,
.material-card > img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.content-detail-image {
  max-height: 520px;
  object-fit: cover;
  width: 100%;
}

/* Make the welcome picture truly full screen. */
.welcome-gate {
  padding: 0 !important;
  background: #061a45 !important;
  backdrop-filter: none !important;
}
.welcome-gate__card {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #061a45 !important;
}
.welcome-gate__image {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.welcome-gate__button {
  bottom: clamp(28px, 7vh, 72px) !important;
  padding: 16px 34px !important;
  min-width: 210px !important;
  font-size: 18px !important;
}

/* Hide the old separate admin section for consultation targets. It stays available in code/API, but is not shown to regular admins. */
.admin-sidebar a[href*="section=targets"],
.admin-sidebar button[data-section="targets"],
.admin-nav a[href*="section=targets"],
.admin-nav button[data-section="targets"],
[data-admin-section="targets"] {
  display: none !important;
}

/* Admin editor for 8 columns. */
.tile-stage-wrap {
  overflow-x: auto !important;
}
.tile-stage {
  min-width: calc(var(--editor-columns, 8) * var(--editor-cell, 92px) + (var(--editor-columns, 8) - 1) * var(--editor-gap, 10px)) !important;
}

@media (max-width: 980px) {
  .tiles-grid,
  body .tiles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 540px) {
  .tiles-grid,
  body .tiles-grid {
    grid-template-columns: 1fr !important;
  }
}