/* assets/css/pages.css */
.kabar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.kabar-card {
  text-decoration: none; color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.15s ease;
}
.kabar-card:hover { transform: translateY(-4px); }
.kabar-card__visual {
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.kabar-card__visual--tanah { background: var(--color-tanah); }
.kabar-card__visual--air { background: var(--color-air); }
.kabar-card__visual--pohon { background: var(--color-pohon); }
.kabar-card__visual--kekuatan { background: var(--color-kekuatan); }
.kabar-card__visual--sejahtera { background: var(--color-sejahtera); }
.kabar-card__visual--budaya { background: var(--color-budaya); }
.kabar-card__icon {
  width: 62%; height: 62%;
  opacity: 0.92;
}
.kabar-card__photo {
  width: 100%; height: 100%;
  object-fit: cover;
}
.kabar-card__badge {
  position: absolute; top: var(--space-1); right: var(--space-1);
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
  padding: 2px 8px; border-radius: var(--radius-sm);
}
.kabar-card__body { padding: var(--space-2); }
.kabar-card__body h3 { font-size: 1.1rem; margin-bottom: var(--space-1); }
.kabar-card__body p { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0; }

.article { max-width: 68ch; }
.article__date { font-family: var(--font-display); font-weight: 700; color: var(--color-ink-soft); }
.article__visual {
  aspect-ratio: 16 / 9;
  margin-block: var(--space-3);
  position: relative; overflow: hidden;
}
.article__icon {
  position: absolute; inset: 12%;
  opacity: 0.92;
}
.article__photo {
  width: 100%; height: 100%;
  object-fit: cover;
}
.article__visual--tanah { background: var(--color-tanah); }
.article__visual--air { background: var(--color-air); }
.article__visual--pohon { background: var(--color-pohon); }
.article__visual--kekuatan { background: var(--color-kekuatan); }
.article__visual--sejahtera { background: var(--color-sejahtera); }
.article__visual--budaya { background: var(--color-budaya); }

.hero {
  background: var(--color-tanah);
  color: var(--color-paper);
  padding-block: var(--space-6);
  position: relative;
  overflow: hidden;
}
/* One large icon bled off the edge always ended up visibly cropped
   mid-shape (see git history) — the actual brand pattern is a scattered
   field of small motifs (SUPERGRAPHIC FKY.svg), never a single silhouette
   clipped by the container. .motif-scatter below supplies that; .hero
   just needs to be the positioned/overflow-hidden host for it. */
.hero__inner { position: relative; z-index: 1; }
.hero__content { max-width: 34rem; }
.hero__eyebrow {
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.hero__title {
  font-size: clamp(4.5rem, 15vw, 10rem);
  margin-bottom: var(--space-3);
  color: var(--color-sejahtera);
}
.hero__lead { font-size: 1.15rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Buttons carry a short call-to-action a person needs to
   read before clicking, so the feedback is a flat "peeling sticker" lift
   (hard-edge offset shadow, no blur — matches the never-rounded, 2px-border
   language used everywhere else) instead of per-letter tilt. */
.button {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75em 1.5em;
  border: 2px solid currentColor;
  border-radius: var(--radius-sm);
  display: inline-block;
  box-shadow: 0 0 0 currentColor;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { transform: translate(-2px, -3px); box-shadow: 4px 4px 0 currentColor; }
.button:active { transform: translateY(1px); box-shadow: 0 0 0 currentColor; }
.button--primary { background: var(--color-sejahtera); color: var(--color-ink); border-color: var(--color-sejahtera); }
.button--ghost { color: var(--color-paper); }

/* Flat color field + oversized pull-quote + scattered small motifs —
   replaces a SaaS-style "30.000 / 7 / 4" stat-card row, which read as
   dashboard chrome nobody needed highlighted this hard, not festival
   collateral. Same visual family as .hero / .page-hero. */
.quote-band {
  background: var(--color-budaya);
  color: var(--color-ink);
  padding-block: var(--space-5);
  position: relative;
  overflow: hidden;
}
.quote-band__inner { position: relative; z-index: 1; max-width: 46rem; }
.quote-band blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  line-height: 1.08;
}
.quote-band cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-top: var(--space-2);
  opacity: 0.8;
}

.intro__inner { max-width: 68ch; margin-inline: auto; text-align: center; }

/* Illustrated venue area map (peta-area-fky.jpeg). */
.roadmap__map-wrap {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-block: var(--space-3);
}
.roadmap__map { width: 100%; height: auto; display: block; }

.roadmap__pills { display: flex; gap: var(--space-2); list-style: none; padding: 0; flex-wrap: wrap; }
.pill {
  display: block; text-align: center; text-decoration: none; color: var(--color-ink);
  border: 2px solid var(--color-ink);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
}
.pill--active { background: var(--color-kekuatan); color: var(--color-paper); border-color: var(--color-kekuatan); }
.pill--soon { opacity: 0.5; }

.program-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.program-card {
  text-decoration: none; color: var(--color-ink);
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  position: relative; overflow: hidden;
  transition: transform 0.15s ease;
}
.program-card:hover { transform: translateY(-4px); }
.program-card:active { transform: translateY(-1px); }
.program-card__icon {
  width: 56px; height: 56px;
  opacity: 0.9;
}
.program-card--sejahtera { background: var(--color-sejahtera); }
.program-card--budaya { background: var(--color-budaya); color: var(--color-paper); }
.program-card--kekuatan { background: var(--color-kekuatan); color: var(--color-paper); }
.program-card--air { background: var(--color-air); color: var(--color-paper); }

/* Inner-page header band — replaces a bare black-on-white <h1> with the
   same "flat color field + bleeding oversized icon" headline
   language as the homepage hero, so every page reads as one system. */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: var(--space-5) var(--space-4);
  margin-bottom: var(--space-2);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: var(--space-1); }
.page-hero p { max-width: 56ch; margin-bottom: 0; }
.page-hero--kekuatan { background: var(--color-kekuatan); color: var(--color-paper); }
.page-hero--air { background: var(--color-air); color: var(--color-paper); }
.page-hero--pohon { background: var(--color-pohon); color: var(--color-ink); }
.page-hero--ink { background: var(--color-ink); color: var(--color-paper); }

.button--ghost-dark { color: var(--color-ink); }

.program-section { padding-block: var(--space-6); position: relative; overflow: hidden; }
.program-section > .container { position: relative; z-index: 1; }
.program-section h2, .program-section p { max-width: 68ch; }
.program-section--sejahtera { background: var(--color-sejahtera); }
.program-section--budaya { background: var(--color-budaya); color: var(--color-paper); }
.program-section--kekuatan { background: var(--color-kekuatan); color: var(--color-paper); }
.program-section--air { background: var(--color-air); color: var(--color-paper); }

/* Same flat "peeling sticker" hover language as .button (pages.css) — a
   day/date needs to stay legible while a person scans for
   the day they want, but it's still a clickable accordion row and needs
   some feedback that it's interactive. */
.agenda-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.agenda-day {
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.agenda-day:has(summary:hover) { transform: translate(-2px, -3px); box-shadow: 4px 4px 0 var(--color-ink); }
.agenda-day summary {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
}
.agenda-day summary:hover { color: var(--color-kekuatan); }
.agenda-day p { color: var(--color-ink-soft); margin-top: var(--space-2); margin-bottom: 0; }

/* Per-day line-up list (assets/data source: internal talent database, PIC/
   contact columns deliberately stripped before publishing). Each row is a
   flex line so long performer names wrap under the category tag instead of
   forcing a horizontal scroll. */
.agenda-day__theme {
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-1) 0 0;
}
.agenda-day__list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}
.agenda-day__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  padding-block: var(--space-1);
  border-top: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent);
}
.agenda-day__list li:first-child { border-top: none; padding-top: 0; }
.agenda-day__cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-kekuatan);
  flex: none;
  min-width: 8em;
}
.agenda-day__name { flex: 1 1 220px; }
.agenda-day__meta { flex: none; color: var(--color-ink-soft); font-size: 0.85rem; }
.agenda-note { color: var(--color-ink-soft); font-size: 0.9rem; margin-top: var(--space-3); }

.pasar-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.pasar-list > div {
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.pasar-list dt {
  font-family: var(--font-display);
  font-weight: 700;
}
.pasar-list dd { margin: var(--space-1) 0 0; font-size: 0.9rem; color: var(--color-ink-soft); }

.about-block { max-width: 68ch; margin-bottom: var(--space-5); }
.venue-map {
  margin-top: var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.venue-map iframe { display: block; width: 100%; height: 360px; }
.letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
}
.letter-grid > div {
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
}
.letter-grid dt {
  width: 56px; height: 56px;
  margin-bottom: var(--space-1);
}
.letter-grid dd { margin: var(--space-1) 0 0; font-size: 0.9rem; color: var(--color-ink-soft); }

/* Section background photos (design team assets, replacing the old
   .kv-field hand-built pattern — see base.css for the full rationale).
   Kept here, after every `.hero`/`.quote-band`/`.page-hero--*`/
   `.program-section--*` color rule above, on purpose: those set
   `background` as a shorthand, which silently resets `background-image`
   back to `none` on whichever same-specificity rule the cascade applies
   last — so the image layer has to be declared after the color, not just
   in a separate file loaded later.
   This is the desktop (landscape) crop of each asset — art sits in the
   right ~40% of the frame with the left side empty, so
   `background-position: right` keeps the illustrated part in view.
   A separate portrait mobile crop of each asset (safe-zone on top instead
   of the left) now exists too — see the `@media (max-width: 640px)` block
   below, which overrides every rule here for narrow viewports. */
.hero { background-image: url('../img/backgrounds/bg-hero-tanah@desktop.png'); background-repeat: no-repeat; background-position: right bottom; background-size: cover; }
.quote-band { background-image: url('../img/backgrounds/bg-pita-budaya@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.page-hero--ink { background-image: url('../img/backgrounds/bg-header-program-ink@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.page-hero--kekuatan { background-image: url('../img/backgrounds/bg-header-agenda-kekuatan@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.page-hero--air { background-image: url('../img/backgrounds/bg-header-tentang-air@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.page-hero--pohon { background-image: url('../img/backgrounds/bg-header-kabar-pohon@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.program-section--sejahtera { background-image: url('../img/backgrounds/bg-panel-program-pawai@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.program-section--budaya { background-image: url('../img/backgrounds/bg-panel-program-pasar@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.program-section--kekuatan { background-image: url('../img/backgrounds/bg-panel-program-panggung@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }
.program-section--air { background-image: url('../img/backgrounds/bg-panel-program-pameran@desktop.png'); background-repeat: no-repeat; background-position: right center; background-size: cover; }

/* Full-bleed venue map — homepage closer, matching the edge-to-edge Google
   Maps treatment on the FKY 2023-2025 sites (no .container wrapper on the
   iframe itself, unlike the smaller bordered-box version on tentang.html). */
.venue-full { background: var(--color-air); color: var(--color-paper); padding-top: var(--space-6); }
.venue-full__intro { padding-bottom: var(--space-3); }
.venue-full__map { display: block; width: 100%; height: 480px; border-top: 2px solid var(--color-ink); }

.venue-full { background-image: url('../img/backgrounds/bg-header-tentang-air@desktop.png'); background-repeat: no-repeat; background-position: right top; background-size: cover; }

/* Real mobile crops (portrait, safe-zone at the top for the stacked
   title/copy, art anchored at the bottom of the frame — confirmed by eye
   on every one of these 10 files) replaced the old same-asset-shrunk-down
   workaround below ~640px. `cover` + `bottom` fills the section edge to
   edge and keeps the art's bottom edge flush with the section's, whatever
   the section's actual rendered height turns out to be on a given phone. */
@media (max-width: 640px) {
  .hero { background-image: url('../img/backgrounds/bg-hero-tanah@mobile.png'); background-position: center bottom; background-size: cover; }
  .venue-full { background-image: url('../img/backgrounds/bg-header-tentang-air@mobile.png'); background-position: center bottom; background-size: cover; }
  .page-hero--ink { background-image: url('../img/backgrounds/bg-header-program-ink@mobile.png'); background-position: center bottom; background-size: cover; }
  .page-hero--kekuatan { background-image: url('../img/backgrounds/bg-header-agenda-kekuatan@mobile.png'); background-position: center bottom; background-size: cover; }
  .page-hero--air { background-image: url('../img/backgrounds/bg-header-tentang-air@mobile.png'); background-position: center bottom; background-size: cover; }
  .page-hero--pohon { background-image: url('../img/backgrounds/bg-header-kabar-pohon@mobile.png'); background-position: center bottom; background-size: cover; }
  .quote-band { background-image: url('../img/backgrounds/bg-pita-budaya@mobile.png'); background-position: center bottom; background-size: cover; }
  .program-section--sejahtera { background-image: url('../img/backgrounds/bg-panel-program-pawai@mobile.png'); background-position: center bottom; background-size: cover; }
  .program-section--budaya { background-image: url('../img/backgrounds/bg-panel-program-pasar@mobile.png'); background-position: center bottom; background-size: cover; }
  .program-section--kekuatan { background-image: url('../img/backgrounds/bg-panel-program-panggung@mobile.png'); background-position: center bottom; background-size: cover; }
  .program-section--air { background-image: url('../img/backgrounds/bg-panel-program-pameran@mobile.png'); background-position: center bottom; background-size: cover; }
}