/* === Mobile-first responsive overrides (non-breaking) === */

/* Fluid typography & spacing */
html {
  font-size: clamp(14px, 1.1vw + 0.5rem, 18px);
}
.container {
  padding-inline: clamp(12px, 2vw, 24px);
}

/* Make media flexible */
img, video, svg, canvas, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent overflow from long words/links */
:where(p, h1, h2, h3, h4, h5, h6, li, a, span, small, strong) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Avoid child overflow in flex/grid layouts */
.grid > *, .flex > * {
  min-width: 0;
}

/* Base grid: 1 column on mobile, scale up on larger screens */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Galleries scale progressively; ensure thumbnails keep ratio */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 600px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}
.gallery img {
  width: 100%;
  height: auto;          /* override any fixed heights */
  aspect-ratio: 4 / 3;   /* keep a pleasant ratio */
  object-fit: cover;
  border-radius: 10px;
}

/* Header: allow wrapping on small screens without overlap */
@media (max-width: 900px) {
  .header .inner {
    flex-wrap: wrap;
    gap: 10px;
  }
  .header .nav {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .header .actions {
    order: 2;
    margin-left: auto;
  }
}

/* Hero video height is fluid */
.hero-video {
  width: 100%;
  height: clamp(220px, 45vw, 520px);
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Utilities to replace inline grid styles */
.pad-16 { padding: 16px; }

.layout-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .layout-2col { grid-template-columns: 1fr; }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
}

/* Buttons block wraps nicely */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Defensive: ensure cards and panels don’t exceed viewport */
.card, .panel, .section {
  max-width: 100%;
}

/* Table fallback: horizontal scroll on small screens without breaking layout */
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

/* Safe-area for notched devices if fixed bars ever appear */
:root {
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
.has-fixed-footer { padding-bottom: calc(56px + var(--safe-bottom)); }
.fixed-footer { padding-bottom: var(--safe-bottom); }