/* ==========================================================================
   Casanita Editorial — Girlfriend Getaway
   --------------------------------------------------------------------------
   Inherits everything from editorial-base.css. The only pillar-specific
   surface is the header-band image and a wrapper selector parallel to
   .romance-pillars so the layout of the tablist matches across pillars.
   ========================================================================== */

.girlfriend-getaway-header-band {
  background-image: url('/wp-content/mu-plugins/casanita-editorial/assets/girlfriend-getaway/images/blocks/header-band.jpg');
}

/* Wrapper class parallel to .romance-pillars — keeps tabs aligned to page
   width even when the surrounding theme grid widens the column. */
.pillar-girlfriend-getaway {
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
}

/* Per-variant hero image — sits beside the copy block on desktop, stacks on mobile. */
.pillar-girlfriend-getaway .variant__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.pillar-girlfriend-getaway .variant__hero-img {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
}
.pillar-girlfriend-getaway .variant__hero-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
@media (max-width: 860px) {
  .pillar-girlfriend-getaway .variant__hero {
    grid-template-columns: 1fr;
  }
  .pillar-girlfriend-getaway .variant__hero-img {
    order: -1;
  }
}

/* Per-day image gallery — 1–4 block photos laid out as a grid. */
.pillar-girlfriend-getaway .day__gallery {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}
.pillar-girlfriend-getaway .day__gallery--n1 { grid-template-columns: 1fr; }
.pillar-girlfriend-getaway .day__gallery--n2 { grid-template-columns: repeat(2, 1fr); }
.pillar-girlfriend-getaway .day__gallery--n3 { grid-template-columns: repeat(3, 1fr); }
.pillar-girlfriend-getaway .day__gallery--n4 { grid-template-columns: repeat(2, 1fr); }
.pillar-girlfriend-getaway .day__gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
}
.pillar-girlfriend-getaway .day__gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 640px) {
  .pillar-girlfriend-getaway .day__gallery--n3,
  .pillar-girlfriend-getaway .day__gallery--n4 {
    grid-template-columns: repeat(2, 1fr);
  }
}