/* Content of Beranda, Tentang Kami, Acara, Sosmed and Galeri. Shell and shared pieces come from site.css. */
main h2 { margin: 0 0 20px; font: 500 clamp(30px, 3.4vw, 40px)/1.05 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
main h3 { margin: 36px 0 14px; font: 500 25px/1.15 var(--serif); letter-spacing: -.01em; }
main p { margin: 0 0 1em; max-width: 66ch; }
.lead { font: 400 21px/1.55 var(--serif); color: var(--tinta); }
.sumber { margin-top: 24px; font-size: 13.5px; color: var(--abu-meta); }

/* Inner page title, set like the section heads on Warta */
.judul-halaman { margin: 0; padding: 36px 0 24px; border-bottom: 1px solid var(--tinta); font: 500 clamp(44px, 6vw, 72px)/1 var(--serif); letter-spacing: -.02em; }

.section { padding-block: 56px; }
/* a rule the width of the content, not of the padded wrap */
.section + .section > .wrap { padding-top: 56px; background: linear-gradient(var(--tinta), var(--tinta)) center top / calc(100% - 2 * var(--pad)) 1px no-repeat; }
.section + .section { padding-top: 0; }
.section-kepala { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 28px; }
.section-kepala h2 { margin: 0; }
.section-kepala a { font-weight: 600; font-size: 14px; white-space: nowrap; }
.cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(24px, 5vw, 64px); }
.cols-full { grid-column: 1 / -1; }
@media (max-width: 768px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.anchor-section { padding-block: 48px; border-top: 1px solid var(--garis); scroll-margin-top: 12px; }
.judul-halaman + .anchor-section { border-top: 0; }

/* ---------- Beranda ---------- */
/* The motto as an open book on the red/white seam, with the cross standing on it */
.hero { overflow: hidden; --gap: clamp(64px, 11vw, 144px); margin-top: 28px; }
.split { position: relative; background: linear-gradient(var(--merah) 50%, var(--kertas) 50%); }
.motto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: var(--gap); min-height: clamp(360px, min(58vh, 56vw), 560px); padding-block: clamp(32px, 6vh, 64px); margin-block: 0; font: 500 clamp(36px, min(5.6vw, 9vh), 80px)/.95 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.motto span { display: block; }
.motto .kiri { color: #fff; text-align: right; align-self: end; padding-bottom: clamp(20px, 3vw, 32px); }
.motto .kanan { color: var(--tinta); grid-column: 2; grid-row: 2; align-self: start; padding-top: clamp(20px, 3vw, 32px); }
.motto em { display: block; font-size: .5em; line-height: 1.3; letter-spacing: 0; }
.motto .kanan em { color: var(--merah); }
.cross { position: absolute; left: 50%; top: clamp(16px, 4vh, 40px); bottom: -20px; width: clamp(8px, 1vw, 12px); margin-left: calc(clamp(8px, 1vw, 12px) / -2); background: var(--tinta); }
.cross::before { content: ""; position: absolute; top: 14%; left: 50%; width: calc(var(--gap) * .8); height: clamp(8px, 1vw, 12px); transform: translateX(-50%); background: var(--tinta); }
.waves { display: block; width: 100%; height: clamp(40px, 5vw, 64px); }
.waves path { fill: none; stroke: var(--tinta); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .waves path { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: draw 2.2s cubic-bezier(.3, .6, .2, 1) .3s forwards; }
  .waves path:nth-child(2) { animation-delay: .55s; }
  .waves path:nth-child(3) { animation-delay: .8s; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}
.hero-note { padding-block: 4px 8px; color: var(--abu-meta); font-size: 15px; }
.hero-note p { margin: 0; }
@media (max-width: 640px) {
  .motto { grid-template-columns: minmax(0, 1fr); column-gap: 0; min-height: 380px; font-size: clamp(34px, 11vw, 52px); }
  .motto .kiri { text-align: left; }
  .motto .kanan { grid-column: 1; text-align: right; }
  .cross { display: none; }
}

.rumah-ibadah { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 32px; align-items: stretch; }
.rumah-ibadah .peta { margin: 0; aspect-ratio: auto; min-height: 320px; height: 100%; }
@media (max-width: 768px) { .rumah-ibadah { grid-template-columns: minmax(0, 1fr); } .rumah-ibadah .peta { aspect-ratio: 4 / 3; } }

.live { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .live { grid-template-columns: minmax(0, 1fr); } }
.yt { aspect-ratio: 16 / 9; background: var(--tinta); }
.yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.live .meta { margin-top: 16px; }

/* Warta terbaru on Beranda (filled by site.js), set like the cards on Warta */
.berita--ringkas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 32px; }
.berita--ringkas .berita-item { display: flex; align-items: stretch; gap: 12px; padding: 16px 0 0; border-top: 1px solid var(--tinta); }
.berita--ringkas .bingkai { aspect-ratio: 4 / 3; }
.berita--ringkas h3 { margin: 0; font: 500 25px/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.berita--ringkas p:not(.meta) { margin: 0; font-size: 15px; color: var(--abu-teks); }

/* Acara (filled by site.js) */
.berita-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(20px, 4vw, 48px); align-items: start; padding-block: 32px; border-top: 1px solid var(--garis); }
.berita-item:first-child { border-top: 1px solid var(--tinta); }
/* Without a picture the text takes the whole row instead of the narrow picture column. */
.berita-item:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
/* Posters are portrait; capped in height rather than cropped, so their text stays whole. */
.berita-item > img { max-width: 100%; max-height: 320px; width: auto; height: auto; }
.berita-item h2 { margin: 8px 0 12px; font-size: clamp(26px, 3vw, 32px); }
.berita-item h2 a { color: var(--tinta); }
.berita-item h2 a:hover { color: var(--merah); }
@media (max-width: 768px) { .berita-item { grid-template-columns: minmax(0, 1fr); } }
.berita-status { margin: 0; padding: 24px 0; color: var(--abu-meta); font-size: 17px; }

/* ---------- Tentang Kami ---------- */
.linimasa { list-style: none; margin: 16px 0 0; padding: 0; border-left: 2px solid var(--merah); }
.linimasa li { position: relative; padding: 0 0 22px 24px; }
.linimasa li:last-child { padding-bottom: 0; }
.linimasa li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--merah); }
.linimasa time { display: block; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--merah); }
.linimasa p { margin: 4px 0 0; font-size: 16.5px; }
.semboyan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; margin: 20px 0 0; }
.semboyan div { padding-top: 12px; border-top: 3px solid var(--merah); }
.semboyan div + div { border-top-color: var(--tinta); }
.semboyan dt { font: italic 500 22px/1.2 var(--serif); }
.semboyan dd { margin: 6px 0 0; font-size: 16px; color: var(--abu-teks); }

details { border-bottom: 1px solid var(--garis); }
details:first-of-type { border-top: 1px solid var(--tinta); }
summary { cursor: pointer; list-style: none; position: relative; padding: 16px 40px 16px 0; font: 500 20px/1.3 var(--serif); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 26px/1 var(--sans); color: var(--merah); }
details[open] summary::after { content: "\2212"; }
summary:hover { color: var(--merah); }
details p { margin: 0 0 20px; color: var(--abu-teks); }

.kontak { margin: 0; }
.kontak div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--garis); }
.kontak div:first-child { border-top: 1px solid var(--tinta); }
.kontak dt { font: 400 11.5px/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--abu-meta); }
.kontak dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .kontak div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.peta { display: block; width: 100%; aspect-ratio: 21 / 9; margin-top: 32px; border: 1px solid var(--garis); background: var(--garis); }
@media (max-width: 640px) { .peta { aspect-ratio: 4 / 3; } }

/* ---------- Sosmed: one row per channel ---------- */
.kanal { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--tinta); }
.kanal li { border-bottom: 1px solid var(--garis); }
.kanal a { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); padding-block: clamp(20px, 3vw, 32px); color: var(--tinta); }
.kanal svg { flex: none; width: 32px; height: 32px; color: var(--merah); }
.kanal b { display: block; font: 500 clamp(28px, 5vw, 52px)/1 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.kanal .meta { display: block; margin-top: 8px; }
.kanal a:hover b { color: var(--merah); }

/* ---------- Galeri: shown whole, never cropped; columns give a masonry flow ---------- */
.galeri { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 24px; }
.galeri li { break-inside: avoid; margin-bottom: 28px; }
.galeri .foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.galeri img { width: 100%; height: auto; background: var(--garis); }
.galeri .foto:hover img, .galeri .foto:focus-visible img { outline: 3px solid var(--merah); outline-offset: -3px; }
.galeri .meta { display: block; margin-top: 8px; }
.galeri .berita-status { columns: 1; }

.lightbox { max-width: min(96vw, 960px); max-height: 94vh; padding: 0; border: 0; background: var(--tinta); color: #fff; }
.lightbox::backdrop { background: rgba(28, 25, 23, .85); }
.lightbox img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; }
.lightbox .meta { margin: 0; padding: 14px 18px; color: var(--topbar-teks); }
.lightbox-close { position: absolute; top: 10px; right: 10px; z-index: 1; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); background: var(--kertas); border: 0; padding: 8px 14px; cursor: pointer; }
.lightbox-close:hover { background: var(--merah); color: #fff; }

.section-kepala a { padding-block: 8px; }
/* Tablets and phones: compact story rows (thumbnail beside the text), in two columns while they fit. */
@media (max-width: 900px) {
  .berita--ringkas { gap: 0 32px; }
  .berita--ringkas .berita-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 14px; align-content: start; padding-block: 16px; }
  .berita--ringkas .berita-item > * { grid-column: 2; }
  .berita--ringkas .bingkai { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 4 / 5; align-self: start; }
  .berita--ringkas .berita-item:not(:has(.bingkai)) { grid-template-columns: minmax(0, 1fr); }
  .berita--ringkas .berita-item:not(:has(.bingkai)) > * { grid-column: 1; }
  .berita--ringkas h3 { font-size: 20px; line-height: 1.18; }
  .berita--ringkas p:not(.meta) { font-size: 14px; line-height: 1.45; }
}
/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .judul-halaman { padding: 24px 0 16px; }
  .section { padding-block: 40px; }
  .section + .section > .wrap { padding-top: 40px; }
  .anchor-section { padding-block: 36px; }
  .cols h2 { margin-bottom: 0; }
  .lead { font-size: 19px; }
  .hero { margin-top: 20px; }
  .motto { min-height: 0; padding-block: 28px 36px; row-gap: 0; }
  .motto .kiri { padding-bottom: 22px; }
  .motto .kanan { padding-top: 22px; }
  .rumah-ibadah { gap: 20px; }
  /* Galeri: two columns, so a phone shows more than one poster at a time */
  .galeri { columns: 2; column-gap: 12px; }
  .galeri li { margin-bottom: 18px; }
  .galeri .meta { font-size: 10.5px; margin-top: 6px; }
  .kanal a { padding-block: 18px; }
}