/* ============================================================
   Miró — Home page styles (mobile-first)
   ============================================================ */

/* ---------- Section heads ---------- */
.section-head { margin-bottom: clamp(28px, 5vw, 48px); }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head p:not(.eyebrow) { margin-top: 12px; }
.section-head--row {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 16px;
}

/* ---------- Hero — two images side by side, no gap (client feedback) ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 54svh;
  background: var(--cream-soft);
}
.hero__pane {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.hero__pane img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 30%;
}
@media (min-width: 900px) {
  .hero { height: 80svh; }
  .hero__pane img { object-position: 55% 25%; }
}

/* ---------- Featured collections — smaller, butted together,
     names in Avenir (client feedback) ---------- */
/* Client feedback 2026-07-28: this trio must line up with the product grid
   on the collections page. That page caps its .container at 1080px and the
   container adds 20px of side padding, so the grid there is 1040px wide —
   match it exactly here. */
.collection-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0; max-width: 1040px; margin-inline: auto;
}
/* Heading sits on the same band as the trio of images */
.section-head--collection { max-width: 1040px; margin-inline: auto; }
.ccard { display: block; }
.ccard__media {
  display: block; overflow: hidden; border-radius: 0;
  aspect-ratio: 1 / 1; background: var(--cream-soft);
}
.ccard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.ccard:hover .ccard__media img, .ccard:focus-visible .ccard__media img { transform: scale(1.04); }
.ccard__name {
  display: block; margin-top: 14px;
  font-family: var(--font-body); font-weight: 500; color: var(--ink);
  font-size: clamp(13px, 1.3vw, 15px); line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
}
@media (min-width: 900px) {
  .collection-grid { gap: 0; grid-template-columns: repeat(3, 1fr); }
}

/* ---------- About ---------- */
.about__grid { display: grid; gap: 36px; align-items: center; }
.about__media { position: relative; }
.about__media img {
  width: 100%; border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.about__caption {
  margin-top: 12px; font-size: 15px; color: var(--ink-soft);
}
.about__copy h2 { margin-top: 10px; margin-bottom: 20px; }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1fr; gap: 72px; }
}

/* ---------- Instagram gallery — solid, gapless, full-bleed ---------- */
/* Column count follows however many posts the back office published, so a
   short journal still fills the row instead of leaving a gap. */
.insta {
  display: grid; gap: 0;
  grid-template-columns: repeat(min(var(--insta-cols, 5), 2), 1fr);
}
.insta a {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream-soft);
}
.insta img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.insta a:hover img, .insta a:focus-visible img { transform: scale(1.06); }
.insta__veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0);
  color: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.insta a:hover .insta__veil, .insta a:focus-visible .insta__veil {
  background: rgba(0, 0, 0, 0.45); color: var(--paper);
}
.insta__veil svg { width: 26px; height: 26px; }
@media (min-width: 700px) {
  .insta { grid-template-columns: repeat(var(--insta-cols, 5), 1fr); }
}