/* ============================================================
   Vultures and Ice Cream - main stylesheet
   ============================================================ */

:root {
  --color-pink-bg: #f5e6ec;
  --color-pink-accent: #ec407a;
  --color-yellow: #f9d423;
  --color-cream: #fcfaeb;
  --color-text: #ec407a;

  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --max-content-width: 880px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-pink-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Site header */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(16px, 2.5vw, 32px) clamp(20px, 3vw, 48px);
  z-index: 10;
}

.logo img {
  display: block;
  /* 50% larger than before: was 140-240, now 210-360 */
  width: clamp(210px, 27vw, 360px);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

.site-nav {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  padding-top: clamp(8px, 1.2vw, 16px);
}

.site-nav a {
  color: var(--color-pink-accent);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.site-nav a:hover {
  opacity: 0.7;
}

/* Hero sections */
.hero {
  position: relative;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

.hero-mountains {
  background-image: url('images/mountains.jpg');
}

.hero-tagline {
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 500;
  color: var(--color-yellow);
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
  max-width: 1200px;
  line-height: 1.2;
}

/* Intro section */
.intro {
  background: var(--color-pink-bg);
  /* Padding reduced ~25% (was 48-120, now 36-90) to make banner shorter */
  padding: clamp(36px, 6vw, 90px) clamp(20px, 5vw, 48px);
  display: flex;
  justify-content: center;
}

.intro p {
  /* Wider text block to match the TTT body width */
  max-width: 1280px;
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 400;
  color: var(--color-pink-accent);
  margin: 0;
  text-align: left;
  line-height: 1.7;
}

/* Teaser sections */
.teaser {
  display: block;
  position: relative;
  min-height: 50vh;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.teaser-studio {
  background-image: url('images/road.jpg');
}

.teaser-trials {
  background-image: url('images/trees.jpg');
}

.teaser-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 6vw, 80px) 24px;
  background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.35));
  transition: background 0.3s ease;
}

.teaser:hover .teaser-content {
  background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
}

.teaser-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  color: white;
  margin: 0 0 clamp(16px, 2.5vw, 32px);
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.teaser-tagline {
  font-size: clamp(18px, 2.5vw, 32px);
  font-weight: 500;
  color: var(--color-pink-accent);
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  line-height: 1.3;
  max-width: 900px;
}

/* Site footer */
.site-footer {
  background: var(--color-cream);
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 48px);
}

.footer-logo {
  display: block;
  width: clamp(180px, 25vw, 320px);
  height: auto;
}

.footer-email {
  color: var(--color-pink-accent);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.footer-email:hover {
  opacity: 0.7;
}

/* ============================================================
   TINTERN TRIALS PAGE
   ============================================================ */

/* Hero - the trees image with hand-drawn TTT lettering baked in.
   Header overlays this image just like the front page. */
.ttt-hero {
  position: relative;
  background: var(--color-pink-bg);
}

.ttt-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100vh;
  object-fit: cover;
  object-position: center;
}

/* Active page indicator in nav (still useful) */
.site-header--ttt .site-nav a.active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cream tagline band sitting just below the hero - taller, centred */
.ttt-tagline-band {
  background: var(--color-cream);
  padding: clamp(56px, 9vw, 120px) clamp(24px, 5vw, 64px);
}

.ttt-tagline {
  margin: 0 auto;
  text-align: center;
  color: var(--color-pink-accent);
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 500;
  max-width: 1200px;
  line-height: 1.3;
}

/* Full-bleed feature image (the spooky tree, sun-through-trees, etc.) */
.ttt-feature {
  background: var(--color-pink-bg);
  display: block;
}

.ttt-feature img {
  display: block;
  width: 100%;
  height: auto;
  /* Crop tall photos to a more banner-like shape */
  max-height: 50vh;
  object-fit: cover;
  object-position: center;
}

/* Standard prose section */
/* Standard prose section - section is full-width (so cream/pink backgrounds
   span the page); inner content is centred and width-capped. */
.ttt-prose {
  background: var(--color-pink-bg);
  padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 48px);
}

.ttt-prose-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.ttt-prose--intro {
  /* Intro paragraph gets a bit more breathing room */
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(16px, 2vw, 32px);
}

.ttt-prose p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
  color: var(--color-pink-accent);
  margin: 0 0 1.2em;
}

.ttt-prose p:last-child {
  margin-bottom: 0;
}

.ttt-prose a {
  color: var(--color-pink-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ttt-prose a:hover {
  opacity: 0.7;
}

.ttt-prose strong {
  font-weight: 600;
}

.ttt-disclaimer {
  font-size: 0.92em !important;
  opacity: 0.85;
}

/* Cards: single row, fixed minimum height, fits as many full cards
   as the page width allows. JS (in cards.js) computes the exact card
   count for the current viewport width and stretches them to fill
   exactly - so we never see a partial card cut off at the edge.
   On mobile, drops to a single full-width card. */
.ttt-cards {
  background: var(--color-pink-bg);
  padding: 0;
  overflow: hidden;
}

.ttt-cards-track {
  display: flex;
  flex-wrap: nowrap;
}

.ttt-cards-track img {
  display: block;
  /* Width is set inline by cards.js based on calculated count.
     Height auto preserves aspect ratio. */
  height: auto;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.ttt-cards-track img:hover {
  transform: translateY(-4px);
}

/* Card image hidden by default; JS adds a class to show only the
   ones that fit. */
.ttt-cards-track img.is-hidden {
  display: none;
}

/* The map - centred, on cream so it has a nice paper-like surround.
   Width matches the body text so the map doesn't dominate. */
.ttt-map {
  background: var(--color-cream);
  padding: clamp(32px, 5vw, 80px) clamp(20px, 5vw, 48px);
  display: flex;
  justify-content: center;
}

.ttt-map img {
  display: block;
  width: 100%;
  height: auto;
  /* Match the prose body width */
  max-width: 1280px;
}

/* POI / Summit / Sector lists */
/* Locations section - full-width container; inner wrapper caps content */
.ttt-locations {
  background: var(--color-pink-bg);
  padding: clamp(20px, 3vw, 48px) clamp(20px, 5vw, 48px);
}

.ttt-locations-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.ttt-locations-heading {
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 600;
  color: var(--color-pink-accent);
  margin: clamp(24px, 3vw, 40px) 0 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ttt-locations-heading:first-child {
  margin-top: 0;
}

.ttt-poi-list {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}

.ttt-poi-list li {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: clamp(13px, 0.95vw, 14px);
  color: var(--color-pink-accent);
  border-bottom: 1px solid rgba(236, 64, 122, 0.15);
  align-items: baseline;
}

.poi-name {
  font-weight: 500;
}

.poi-coords {
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.poi-points {
  text-align: right;
  font-weight: 500;
}

a.poi-points {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.poi-points:hover {
  opacity: 0.7;
}

/* Sector list has only 2 columns (no separate coords) */
.ttt-sector-list li {
  grid-template-columns: 2fr 1fr;
}

/* "Cream-section" modifier - applies cream background + black text to
   ttt-prose and ttt-locations sections. Used between the cards and the
   40-miles banner so the middle of the page reads as one cohesive
   cream document. Defined here so it overrides the base classes above. */
.ttt-prose--cream,
.ttt-locations--cream {
  background: var(--color-cream);
}

.ttt-prose--cream p,
.ttt-prose--cream strong,
.ttt-locations--cream .ttt-locations-heading,
.ttt-locations--cream .ttt-poi-list li,
.ttt-locations--cream .poi-name,
.ttt-locations--cream .poi-coords,
.ttt-locations--cream .poi-points {
  color: #1a1a1a;
}

.ttt-prose--cream a,
.ttt-locations--cream a {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ttt-locations--cream .ttt-poi-list li {
  /* Subtle grey divider that reads on cream */
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

/* "40 miles of bad road" black band */
.ttt-40miles {
  background: #000;
  display: block;
}

.ttt-40miles img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lyric + Spotify side by side - cream band runs full width,
   inner content stays centred and capped */
.ttt-lyric {
  background: var(--color-cream);
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 48px);
}

.ttt-lyric-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  align-items: center;
}

.ttt-lyric-text {
  /* container for lyric lines + context note */
}

.lyric-line {
  /* Match the trees-for-cities / front-page teaser title styling */
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  font-style: normal;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 0;
}

.lyric-context {
  margin: 1.5em 0 0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: #444;
  font-style: normal;
}

.ttt-spotify iframe {
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
}

/* Trees for Cities - text overlaid on the trees background image,
   styled like the front-page teasers */
.ttt-trees {
  position: relative;
  display: block;
  min-height: 60vh;
  background-image: url('images/trees-cities.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.ttt-trees-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 48px);
  /* Soft dark overlay so pink text reads against the bright sun */
  background: linear-gradient(rgba(0,0,0,0.20), rgba(0,0,0,0.40));
}

.ttt-trees-title {
  /* Match the front-page teaser title size */
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  color: white;
  margin: 0 0 clamp(16px, 2vw, 28px);
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  /* No uppercase - keep as title-case */
  letter-spacing: normal;
}

.ttt-trees-text {
  max-width: 800px;
  margin: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  /* Left-justified body */
  text-align: left;
}

.ttt-trees-text a {
  color: var(--color-pink-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.ttt-trees-text a:hover {
  opacity: 0.8;
}

/* ============================================================
   STUDIO PAGE
   ============================================================ */

/* Active page indicator (matches the TTT pattern) */
.site-header--studio .site-nav a.active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The studio page header sits on the pink background, not over a hero
   image - so we need top padding on the first section to clear the
   absolutely-positioned header above. */
.studio-heading {
  background: var(--color-pink-bg);
  padding: clamp(120px, 16vw, 200px) clamp(20px, 5vw, 48px) clamp(40px, 6vw, 72px);
}

.studio-heading-inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.studio-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  color: var(--color-pink-accent);
  margin: 0 0 clamp(16px, 2vw, 24px);
  line-height: 1.1;
}

.studio-tagline {
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 500;
  color: var(--color-pink-accent);
  margin: 0 auto;
  max-width: 720px;
  line-height: 1.4;
}

/* Grid section */
.studio-grid-section {
  background: var(--color-pink-bg);
  padding: clamp(20px, 3vw, 48px) clamp(20px, 5vw, 48px) clamp(56px, 8vw, 96px);
}

.studio-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 40px);
}

/* Individual product tile */
.product {
  display: flex;
  flex-direction: column;
}

.product-image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  margin-bottom: clamp(14px, 1.4vw, 20px);
}

.product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-image:hover img {
  transform: scale(1.03);
}

.product-name {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 600;
  color: var(--color-pink-accent);
  margin: 0 0 0.4em;
  line-height: 1.3;
}

.product-desc {
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 400;
  color: var(--color-pink-accent);
  margin: 0 0 0.9em;
  line-height: 1.5;
  flex-grow: 1; /* push the buy link to the bottom of each tile */
}

.product-buy {
  align-self: flex-start;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  color: var(--color-pink-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.product-buy:hover {
  opacity: 0.7;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {
  .site-header {
    flex-direction: row;
    align-items: center;
    /* Tighter padding on mobile */
    padding: 12px 16px;
  }

  .logo img {
    /* Smaller on mobile so nav has room beside it */
    width: 140px;
  }

  .site-nav {
    flex-direction: column;
    gap: 4px;
    padding-top: 0;
    text-align: right;
  }

  .site-nav a {
    /* Slightly smaller mobile nav */
    font-size: 13px;
  }

  .hero {
    min-height: 70vh;
  }

  /* TTT hero: avoid cropping the title too tight - let it be a bit taller */
  .ttt-hero img {
    min-height: 60vh;
  }

  .teaser {
    min-height: 40vh;
  }

  .teaser-tagline br {
    display: none;
  }

  /* Cards: one per row on mobile */
  .ttt-cards-track {
    grid-template-columns: 1fr;
    max-width: 320px; /* keep cards from getting too huge on small screens */
  }

  /* TTT mobile adjustments */
  .ttt-poi-list li {
    /* Stack name, coords, points on mobile */
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 10px 0;
  }

  .poi-coords,
  .poi-points {
    text-align: left;
    font-size: 0.92em;
    opacity: 0.8;
  }

  a.poi-points {
    /* Keep underline visible on mobile for tap affordance */
    opacity: 1;
  }

  .ttt-sector-list li {
    grid-template-columns: 1fr;
  }

  .ttt-lyric-inner {
    grid-template-columns: 1fr;
  }

  /* Studio grid: single column on mobile */
  .studio-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet: 2-up product grid */
@media (min-width: 701px) and (max-width: 1000px) {
  .studio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}