/* =============================================================================
 * P7 Shared Layout Variants — hero motion + gallery layouts
 * Load AFTER county theme CSS. Scoped via body classes on preview / template.
 * ============================================================================= */

/* ── Hero: Ken Burns (slow zoom/pan on slides) ── */
.p7-hero-kenburns {
  position: relative;
  overflow: hidden;
}
.p7-hero-kenburns .p7-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p7-hero-kenburns .p7-hero-slide {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: p7KenBurns 18s ease-in-out infinite alternate;
}
.p7-hero-kenburns .p7-hero-slide.active {
  opacity: 1;
  z-index: 1;
}
@keyframes p7KenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}

/* ── Hero: crossfade slideshow ── */
.p7-hero-slideshow .p7-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p7-hero-slideshow .p7-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.p7-hero-slideshow .p7-hero-slide.active { opacity: 1; }

/* ── Hero: parallax (JS sets transform on scroll) ── */
.p7-hero-parallax {
  position: relative;
  overflow: hidden;
}
.p7-hero-parallax .p7-hero-bg {
  position: absolute;
  inset: -15% 0 0 0;
  height: 130%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}
.p7-hero-parallax .p7-hero-overlay { z-index: 2; }
.p7-hero-parallax .p7-hero-content { position: relative; z-index: 3; }

/* Hero slide dots (optional) */
.p7-hero-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 0.5rem;
}
.p7-hero-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.p7-hero-dots button.active,
.p7-hero-dots button:hover {
  background: #fff;
}

/* ── Gallery: standard grid (enhanced featured tile) ── */
.p7-gallery-featured {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 0.5rem;
  margin-top: 2rem;
}
.p7-gallery-featured .p7-gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.p7-gallery-featured .p7-gallery-item:nth-child(5) {
  grid-column: span 2;
}
@media (max-width: 768px) {
  .p7-gallery-featured {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }
  .p7-gallery-featured .p7-gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
  .p7-gallery-featured .p7-gallery-item:nth-child(5) {
    grid-column: span 1;
  }
}

/* ── Gallery: masonry (CSS columns) ── */
.p7-gallery-masonry {
  column-count: 3;
  column-gap: 0.65rem;
  margin-top: 2rem;
}
.p7-gallery-masonry .p7-gallery-item {
  break-inside: avoid;
  margin-bottom: 0.65rem;
  aspect-ratio: auto;
  display: block;
}
.p7-gallery-masonry .p7-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}
.p7-gallery-masonry .p7-gallery-item--short img { min-height: 160px; object-fit: cover; }
.p7-gallery-masonry .p7-gallery-item--tall img { min-height: 280px; object-fit: cover; }
@media (max-width: 768px) {
  .p7-gallery-masonry { column-count: 2; }
}
@media (max-width: 480px) {
  .p7-gallery-masonry { column-count: 1; }
}

/* ── Gallery: mosaic / bento ── */
.p7-gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 0.5rem;
  margin-top: 2rem;
}
.p7-gallery-mosaic .p7-gallery-item {
  aspect-ratio: auto;
  min-height: 100%;
}
.p7-gallery-mosaic .p7-gallery-item:nth-child(1) { grid-column: span 7; grid-row: span 3; }
.p7-gallery-mosaic .p7-gallery-item:nth-child(2) { grid-column: span 5; grid-row: span 2; }
.p7-gallery-mosaic .p7-gallery-item:nth-child(3) { grid-column: span 5; grid-row: span 2; }
.p7-gallery-mosaic .p7-gallery-item:nth-child(4) { grid-column: span 4; grid-row: span 2; }
.p7-gallery-mosaic .p7-gallery-item:nth-child(5) { grid-column: span 4; grid-row: span 2; }
.p7-gallery-mosaic .p7-gallery-item:nth-child(6) { grid-column: span 4; grid-row: span 2; }
@media (max-width: 768px) {
  .p7-gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }
  .p7-gallery-mosaic .p7-gallery-item:nth-child(n) {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  .p7-gallery-mosaic .p7-gallery-item:nth-child(1) {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }
}

/* ── Gallery: editorial staggered rows ── */
.p7-gallery-editorial {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 2rem;
}
.p7-gallery-editorial .p7-gallery-row {
  display: grid;
  gap: 0.65rem;
}
.p7-gallery-editorial .p7-gallery-row--2 {
  grid-template-columns: 1.2fr 0.8fr;
}
.p7-gallery-editorial .p7-gallery-row--3 {
  grid-template-columns: repeat(3, 1fr);
}
.p7-gallery-editorial .p7-gallery-row--1 {
  grid-template-columns: 1fr;
}
.p7-gallery-editorial .p7-gallery-item {
  aspect-ratio: 16 / 10;
}
@media (max-width: 768px) {
  .p7-gallery-editorial .p7-gallery-row--2,
  .p7-gallery-editorial .p7-gallery-row--3 {
    grid-template-columns: 1fr;
  }
  .p7-gallery-editorial .p7-gallery-item { aspect-ratio: 4 / 3; }
}

/* ── Gallery: compact masonry (2-col, tighter) ── */
.p7-gallery-masonry-compact {
  column-count: 2;
  column-gap: 0.5rem;
  margin-top: 2rem;
}
.p7-gallery-masonry-compact .p7-gallery-item {
  break-inside: avoid;
  margin-bottom: 0.5rem;
  aspect-ratio: auto;
  border-radius: 2px;
}
.p7-gallery-masonry-compact .p7-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Shared gallery item hover for all variants */
.p7-gallery-masonry .p7-gallery-item,
.p7-gallery-mosaic .p7-gallery-item,
.p7-gallery-featured .p7-gallery-item,
.p7-gallery-editorial .p7-gallery-item,
.p7-gallery-masonry-compact .p7-gallery-item {
  overflow: hidden;
  cursor: pointer;
  background: var(--brand-200);
}
.p7-gallery-masonry .p7-gallery-item img,
.p7-gallery-mosaic .p7-gallery-item img,
.p7-gallery-featured .p7-gallery-item img,
.p7-gallery-editorial .p7-gallery-item img,
.p7-gallery-masonry-compact .p7-gallery-item img {
  transition: transform 0.45s ease;
}
.p7-gallery-masonry .p7-gallery-item:hover img,
.p7-gallery-mosaic .p7-gallery-item:hover img,
.p7-gallery-featured .p7-gallery-item:hover img,
.p7-gallery-editorial .p7-gallery-item:hover img,
.p7-gallery-masonry-compact .p7-gallery-item:hover img {
  transform: scale(1.05);
}

/* ── Section spacing (standard padding; avoids double stack with content-wrap) ── */
.p7-section,
#p7-main section {
  padding: 3rem 1rem;
}
@media (min-width: 1024px) {
  .p7-section,
  #p7-main section {
    padding: 4rem 1.5rem;
  }
}
#p7-main .p7-content-wrap,
#p7-main .p7-wide-wrap {
  padding: 0 1.5rem;
}

/* ── Footer divider: full viewport width ── */
[class*="p7-county-"] #p7-footer {
  overflow-x: clip;
}
[class*="p7-county-"] #p7-footer::before {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Layout badge (preview) */
.p7-layout-badge {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 9999;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 0.45rem 0.75rem;
  border-radius: 2px;
  pointer-events: none;
}