/* ============================================================
   TONIO'S — Shared inner-page styles
   (live-music.html, shop-the-shack.html, visit.html)
   ============================================================ */

.page-inner main { background: var(--cream); }

/* ── Inner hero ──────────────────────────────────────────── */
.ip-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-top: var(--bar-h, 0);
}
.ip-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--navy);
}
.ip-hero--music  .ip-hero-bg { background-image: url('images/tonies-music.jpg'); }
.ip-hero--shop   .ip-hero-bg { background-image: url('images/appearal-tonies.jpg'); }
.ip-hero--visit  .ip-hero-bg { background-image: url('images/outside-high-res-shack.png'); background-position: center 30%; }
.ip-hero--crew   .ip-hero-bg { background-image: url('images/the-shack-toines.jpg'); }
.ip-hero--events .ip-hero-bg { background-image: url('images/dockside-tonies.png'); background-position: center 40%; }

.ip-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,36,43,.92) 0%, rgba(20,36,43,.35) 55%, rgba(20,36,43,.1) 100%);
}
.ip-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem clamp(2rem, 5vw, 3.5rem);
  color: var(--cream);
}
.ip-hero-h1 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: .98;
  margin: .25rem 0 .75rem;
}
.ip-hero-sub {
  font-family: var(--f-sans);
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 42ch;
  opacity: .92;
}

/* ── Generic section wrap ───────────────────────────────── */
.ip-section { padding: clamp(3rem, 7vw, 5rem) 0; }
.ip-section--alt { background: var(--cream-d); border-top: 1px solid rgba(20,36,43,.08); border-bottom: 1px solid rgba(20,36,43,.08); }
.ip-wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }
.ip-wrap--narrow { max-width: 720px; }

.ip-h2 {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  color: var(--navy);
  margin-bottom: 1.75rem;
  letter-spacing: .01em;
}
.ip-p {
  font-family: var(--f-sans);
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--navy);
  max-width: 64ch;
  margin-bottom: 1.1rem;
}
.ip-p a { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; }

/* ── Two-column editorial layout (Visit page) ───────────── */
.ip-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .ip-split { grid-template-columns: 1fr; } }

.ip-info-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(20,36,43,.12);
  font-family: var(--f-sans);
}
.ip-info-label { font-weight: 700; color: var(--navy); }
.ip-info-value { color: var(--navy); opacity: .85; text-align: right; }
.ip-info-value a { color: var(--rust); }

.ip-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  filter: grayscale(.15) contrast(1.05);
}

/* ── Shop the Shack ──────────────────────────────────────── */
.shop-lede {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
@media (max-width: 880px) { .shop-lede { grid-template-columns: 1fr; } }
.shop-lede-photo {
  min-height: 320px;
  background-size: cover;
  background-position: center;
  background-image: url('images/gallery-people-3.jpg');
}
.shop-lede-photo--apparel {
  background-image: url('images/appearal-tonies.jpg');
}
.shop-note {
  font-family: var(--f-sans);
  font-size: .92rem;
  color: var(--navy);
  opacity: .7;
  margin-top: 1.5rem;
}

/* ── Empty state ─────────────────────────────────────────── */
.no-events {
  font-family: var(--f-sans);
  color: var(--navy);
  opacity: .7;
  padding: 1.5rem 0;
}

/* ── Meet the Crew page ──────────────────────────────────── */
.ip-split--reverse { direction: rtl; }
.ip-split--reverse > * { direction: ltr; }
@media (max-width: 880px) { .ip-split--reverse { direction: ltr; } }

.ip-crew-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--navy);
  background-size: cover;
  background-position: center top;
  border-radius: 4px;
}
/* Crew photo placeholders — replace with confirmed photos when available */
.ip-crew-photo--tonio   { background-color: var(--navy); background-image: url('images/pierce-tonies.png'); }
.ip-crew-photo--jeff    { background-color: var(--navy); }
.ip-crew-photo--marilyn { background-color: var(--navy); }

.ip-crew-staff-photo {
  width: 100%;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  background-image: url('images/the crew tonies.jpg');
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin: 1.5rem 0;
}

/* ── Visit page photo band ─────────────────────────────── */
.visit-photo-band {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-height: 300px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .visit-photo-band { grid-template-columns: 1fr; max-height: none; }
  .visit-photo-band img { height: 200px; }
}

/* ── Shop apparel showcase ────────────────────────────── */
@media (max-width: 640px) {
  .shop-apparel-split { grid-template-columns: 1fr !important; }
}

/* ── Events page ──────────────────────────────────────── */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.event-card {
  background: var(--navy);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}
.event-card-day {
  background: var(--rust);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 1.25rem .6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2.5rem;
}
.event-card--coming .event-card-day {
  background: var(--aqua);
}
.event-card-body {
  padding: 1.25rem 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
}
.event-card-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--cream);
  margin: 0 0 .5rem;
  text-transform: uppercase;
}
.event-card-desc {
  font-family: var(--f-sans);
  font-size: .9rem;
  color: rgba(243,236,220,.75);
  line-height: 1.55;
  margin: 0 0 .85rem;
  flex: 1;
}
.event-card-link {
  font-family: var(--f-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--rust);
  text-decoration: none;
  text-transform: uppercase;
}
.event-card-link:hover { color: var(--cream); }

.ip-list {
  margin: 1.25rem 0 0 1.25rem;
  padding: 0;
  color: var(--cream-d);
  font-size: .95rem;
  line-height: 1.7;
}

.ip-crew-photo--events {
  background-image: url('images/dockside-tonies.png');
  background-size: cover;
  background-position: center;
  min-height: 320px;
  border-radius: 4px;
}

.ip-cta {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
}
.ip-cta .ip-h2 { color: var(--cream); }

@media (max-width: 640px) {
  .events-grid { grid-template-columns: 1fr; }
  .event-card-day { writing-mode: horizontal-tb; transform: none; padding: .75rem 1rem; min-width: auto; }
  .event-card { flex-direction: column; }
  .ip-crew-photo--events { min-height: 220px; }
}