/* Uniform grids: every box in a row is the same size, images share one height, captions and buttons line up.
   Loaded last; overrides the earlier per-breakpoint tile spans. */

/* ---------- Sport & Wellness hero: real photo beside the green lettering panel (photo shown near its real size) ---------- */
.sport-hero { position: relative; display: block; min-height: 0; background: #1d2a14; overflow: hidden; }
#app .sport-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 2582 / 916; object-fit: cover; object-position: 60% 50%;
  -webkit-mask-image: none; mask-image: none;
}
.sport-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 42% 52% at 50% 34%, rgba(10,16,8,.42), rgba(10,16,8,0) 75%); }
.sport-hero-content { position: absolute; z-index: 2; left: 50%; top: 5%; transform: translateX(-50%); width: min(820px, 90%);
  padding: 0; text-align: center; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.55); }
.sport-hero .sport-leaf { font-size: clamp(28px, 3vw, 46px); }
.sport-hero .sport-brand { font-size: clamp(40px, 5.6vw, 92px); line-height: 1; }
.sport-hero .sport-sub { font-size: clamp(14px, 1.8vw, 28px); letter-spacing: .3em; }
.sport-hero .sport-script { font-size: clamp(22px, 2.6vw, 42px); margin: .2em 0; }
.sport-hero .sport-words { font-size: clamp(11px, 1vw, 15px); margin-bottom: 1em; }
.sport-hero .btn-ghost { background: rgba(0,0,0,.25); }
@media (max-width: 760px) {
  .sport-hero-content { position: static; transform: none; width: auto; padding: 20px 16px 30px; background: var(--forest, #2f4a26); text-shadow: none; }
  .sport-hero::after { display: none; }
  #app .sport-photo { aspect-ratio: 4 / 3; object-position: 72% 60%; }
}

/* ---------- Sport activities: 11 equal tiles, same image height, captions aligned ---------- */
.acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; align-items: stretch; }
.acts .act, .acts .act.wide, .acts .act:nth-child(n) { flex: 0 0 calc((100% - 20px) / 11); grid-column: auto; min-width: 0; }
#app .acts .act img { width: 100%; height: 300px; aspect-ratio: auto; object-fit: cover; object-position: center 35%; }
.acts .act-body { min-height: 112px; justify-content: flex-start; padding: 12px 6px 14px; }

/* ---------- Sport countries: 10 equal tiles ---------- */
.wdests { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.wdests figure { flex: 0 0 calc((100% - 18px) / 10); min-width: 0; display: flex; flex-direction: column; }
#app .wdests img { width: 100%; height: 230px; aspect-ratio: auto; object-fit: cover; }
.wdests figcaption { min-height: 54px; display: flex; align-items: center; justify-content: center; flex: 1; }

/* ---------- Travel destination cards: same height, buttons on one line ---------- */
.dests { align-items: stretch; }
.dest { display: flex; flex-direction: column; height: 100%; }
#app .dest img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.dest-body { flex: 1; display: flex; flex-direction: column; }
.dest-body small { flex: 1; }
.dest-body .pill { align-self: flex-start; margin-top: 12px; }

/* ---------- Community tiles (connections, events): same image size, same caption band ---------- */
.tiles.four { align-items: stretch; }
.tiles.four .tile { display: flex; flex-direction: column; }
#app .tiles.four .tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tiles.four .tile figcaption { flex: 1; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Shop: collections dropdown + uniform product cards ---------- */
.sp-filter { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 24px; flex-wrap: wrap; }
.sp-filter label { font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); }
.sp-select {
  font: 500 18px var(--serif); color: var(--ink); background: var(--paper); border: 1.5px solid var(--rose); border-radius: 999px;
  padding: 10px 44px 10px 20px; min-width: 260px; cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a2335' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.sp-select:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }
.favs { display: block; }
.sp-cat { margin: 0 0 34px; }
.sp-cat[hidden] { display: none; }
.sp-cat-head { display: flex; align-items: center; gap: 12px; font-size: 22px; text-transform: uppercase; margin: 0 0 14px; }
.sp-cat-head small { display: block; text-transform: none; font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.sp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sp-card { display: flex; flex-direction: column; background: var(--paper); border-radius: 8px; overflow: hidden;
  box-shadow: 0 3px 12px rgba(59,29,24,.08); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.sp-card:hover, .sp-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(59,29,24,.14); }
.sp-img { display: block; background: var(--cream-2); }
#app .sp-img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.sp-body { flex: 1; display: flex; flex-direction: column; padding: 12px 14px 14px; gap: 4px; }
.sp-body b { font-size: 17px; line-height: 1.2; }
.sp-body small { font-size: 14px; color: var(--ink-soft); line-height: 1.3; flex: 1; }
.sp-cta { margin-top: 8px; align-self: flex-start; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  background: var(--rose); color: var(--ink); padding: 6px 14px; border-radius: 999px; }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .acts .act, .acts .act.wide, .acts .act:nth-child(n) { flex-basis: calc((100% - 10px) / 6); }
  #app .acts .act img { height: 240px; }
  .wdests figure { flex-basis: calc((100% - 8px) / 5); }
  #app .wdests img { height: 200px; }
  .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1366px) {
  #app .acts .act img { height: 260px; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .acts .act, .acts .act.wide, .acts .act:nth-child(n) { flex-basis: calc((100% - 4px) / 3); }
  #app .acts .act img { height: 200px; }
  .wdests figure { flex-basis: calc((100% - 2px) / 2); }
  #app .wdests img { height: 170px; }
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sp-select { min-width: 0; width: 100%; }
}

/* ---------- Home: taller scene so Mutty stands inside it, never over the photo strip ---------- */
@media (min-width: 901px) {
  #app .home-photo { height: calc(38vw + 270px); max-height: none; object-fit: cover; object-position: 62% 35%; }
  .home-hero .welcome { top: auto; bottom: 2.5%; }
}

/* ---------- Side heroes (Travel, Community, Shop): the text column never runs into the photo ---------- */
@media (min-width: 761px) {
  .side-hero-text { padding: 40px clamp(20px, 2.5vw, 48px) 40px clamp(24px, 5vw, 96px); min-width: 0; }
  .side-hero .display { font-size: clamp(40px, 4.4vw, 84px); overflow-wrap: break-word; }
  .side-hero .display-script { font-size: clamp(30px, 3vw, 52px); }
  .side-hero .mini-icons { flex-wrap: wrap; row-gap: 14px; }
  .side-hero .mini-icons li { padding: 0 12px; max-width: none; flex: 1 1 0; min-width: 96px; }
  .side-hero .mini-icons li:first-child { padding-left: 0; }
}

/* sticky notes on Community + Shop sit on the photo's corner at every desktop width */
@media (min-width: 761px) {
  .side-hero { position: relative; }
  .side-hero .hero-note, [data-page="shop"] .hero-note {
    position: absolute; top: auto; bottom: 28px; right: 28px; left: auto; width: 200px; margin: 0; z-index: 3; transform: rotate(4deg);
  }
}

/* ===== image audit fixes (crops that didn't make sense) ===== */
/* Coffee journey: The Americas is a tall Rio photo; frame the Christ the Redeemer summit, not a slice of the hillside */
#app .timeline img[src*="hist-americas"] { object-position: 50% 16%; }
/* Coffee journey: all five captions start on the same line (the globe icon was taller than the flags) */
.timeline h3 { min-height: 26px; align-items: center; }
.timeline h3 .ic, .timeline h3 .flag { flex: none; }
.timeline .globe-sm { font-size: 18px; width: 26px; height: 17px; }

/* Travel like a local: four photos, one height */
.local-imgs { align-items: stretch; }
#app .local-imgs img { width: 100%; height: 240px; min-height: 0; aspect-ratio: auto; object-fit: cover; align-self: stretch; }

/* Shop travel resources: four photos, one height */
#app .resources img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Our Story next chapter: keep the whole trees sketch (it is line art, not a photo) */
#app .next-chapter .next-art { object-fit: contain; object-position: left center; }

@media (max-width: 760px) {
  #app .local-imgs img { height: 160px; }
}