/* Rupadhi service pages, Gambar Kerja style. Loaded after beranda.css on the pages in rupadhi_halaman_info(). */
.strip nav a.on { box-shadow: inset 0 -4px 0 var(--red); }

/* Page header: title and intro beside Detail A and the title block */
.page-hero .head { display: flex; flex-direction: column; padding: 56px 56px 48px; border-right: 1px solid var(--line); }
.toc { margin-top: auto; padding-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; max-width: 640px; }
.toc small { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1.5px solid var(--line); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.toc a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc b { font-stretch: 80%; font-weight: 800; color: var(--red); }
.toc a:hover { color: var(--red); }
.kicker { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kicker a { color: var(--line); text-decoration: none; border-bottom: 1.5px solid var(--line); }
.kicker a:hover { color: var(--red); border-color: var(--red); }
.rp-halaman h1 { font-size: clamp(44px, 4.8vw, 80px); }
.intro p { max-width: 36em; margin: 0 0 16px; text-wrap: pretty; }
.intro .lede { margin-bottom: 20px; }
.page-hero .detail .photo { padding-bottom: 24px; }
.page-hero .titleblock .wide { grid-column: span 3; border-right: 0; }
.page-hero .titleblock .price { grid-column: span 2; }

/* Sections: view title on the left, text on the right */
.sheet .sec { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 56px; }
.sec .viewtitle { position: sticky; top: 24px; align-self: start; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; }
.rp-gk .sec .viewtitle h2 { font-size: clamp(30px, 2.8vw, 44px); line-height: .98; text-wrap: balance; }
.admin-bar .sec .viewtitle { top: 56px; }

.prose { min-width: 0; max-width: 860px; }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 20px; }
.prose p { max-width: 40em; text-wrap: pretty; }
.prose strong { font-weight: 700; }
.prose a { color: var(--red); text-underline-offset: 3px; }
.prose a:hover { color: var(--line); }
.rp-gk .prose h3 { margin-top: 40px; color: var(--line); font-family: inherit; font-stretch: 80%; font-weight: 900; font-size: 22px; line-height: 1.15; text-transform: uppercase; }
.rp-gk .prose > h3:first-child { margin-top: 0; }
.rp-gk .prose h3 + p { margin-top: 10px; }

.prose ul, .prose ol { padding: 0; list-style: none; max-width: 44em; border-bottom: 1px solid var(--line); }
.prose li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--line); }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: 22px; width: 9px; height: 9px; background: var(--red); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; padding-left: 44px; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0; top: 10px; font-stretch: 75%; font-weight: 900; font-size: 22px; line-height: 1.3; color: var(--red); }

/* Spec tables: labels in the first column, as on a drawing's revision table */
.prose .wp-block-table { margin-left: 0; margin-right: 0; overflow-x: auto; }
.prose table { width: 100%; margin: 0; border-collapse: collapse; border: 1.5px solid var(--line); font-size: 15px; line-height: 1.5; }
.prose th, .prose td { border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top; }
.prose thead th { padding-top: 8px; padding-bottom: 8px; border-bottom: 1.5px solid var(--line); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.prose thead th:first-child, .prose tbody td:first-child { border-right: 1px solid var(--line); }
.prose tbody td:first-child { width: 32%; background: var(--paper-2); font-stretch: 80%; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.prose tbody tr:last-child td { border-bottom: 0; }

/* Work photos as lettered details, continuing from Detail A */
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: none; padding: 0; counter-reset: d 1; }
.prose .wp-block-gallery figure { margin: 0; counter-increment: d; }
.prose .wp-block-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1.5px solid var(--line); }
.prose .wp-block-gallery figcaption { display: flex; gap: 10px; margin-top: 10px; font-size: 14px; line-height: 1.4; }
.prose .wp-block-gallery figcaption::before { content: counter(d, upper-alpha); flex: none; width: 26px; height: 26px; border: 1.5px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-stretch: 75%; font-weight: 900; font-size: 13px; }
/* A single photo keeps its own shape: as wide as the text column, no taller than 620px, caption under it */
.rp-gk .prose > .wp-block-image { width: fit-content; max-width: 100%; margin: 32px 0; }
.rp-gk .prose > .wp-block-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; border: 1.5px solid var(--line); }
.rp-gk .prose > .wp-block-image figcaption { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* FAQ answers can hold several paragraphs or a list */
.prose .faq { max-width: none; }
.faq .answer { padding: 0 36px 22px 56px; max-width: 46em; color: #2A2925; }
.faq .answer > * { margin: 0; }
.faq .answer > * + * { margin-top: 12px; }
.faq .answer p { padding: 0; }

/* Other sheets in the set */
.other-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; max-width: 980px; border-top: 1.5px solid var(--line); }
.other { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.other small { font-stretch: 75%; font-weight: 900; font-size: 18px; color: var(--red); }
.other b { font-stretch: 78%; font-weight: 900; font-size: 20px; line-height: 1.15; text-transform: uppercase; }
.other i { font-style: normal; font-size: 20px; color: var(--red); transition: transform .15s ease; }
.other:hover b { color: var(--red); }
.other:hover i { transform: translateX(4px); }

/* Plain sheets (Galeri, Kontak, Blog): header without the photo column, untitled sections across the sheet */
.page-hero.solo { grid-template-columns: minmax(0, 1fr); }
.page-hero.solo .head { border-right: 0; }
.page-hero.solo .toc { max-width: 760px; }
.sheet .sec.plain { grid-template-columns: minmax(0, 1fr); }
.sec.plain .prose { max-width: none; }

/* Galeri slideshow ([rupadhi_galeri]): its own inline styles, redrawn in the sheet's colours and type */
.rp-gk .rp-g { margin: 0; }
.rp-gk .rp-g-filters { gap: 0; margin-bottom: 20px; border: 1.5px solid var(--line); width: fit-content; max-width: 100%; }
.rp-gk .rp-g-filter { min-height: 44px; padding: 0 18px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--line); font: 700 13px/1 "Archivo", Arial, sans-serif; font-stretch: 85%; text-transform: uppercase; letter-spacing: .06em; }
.rp-gk .rp-g-filter:last-child { border-right: 0; }
.rp-gk .rp-g-filter:hover { background: var(--paper-2); color: var(--red); }
.rp-gk .rp-g-filter[aria-pressed="true"] { background: var(--line); color: var(--paper); }
.rp-gk .rp-g-filter:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.rp-gk .rp-g-stage { background: var(--paper-2); border: 1.5px solid var(--line); }
.rp-gk .rp-g-slide img { background: var(--paper-2); }
.rp-gk .rp-g-slide figcaption { padding: 12px 18px; background: var(--paper); border-top: 1px solid var(--line); color: var(--line); font-size: 15px; }
.rp-gk .rp-g-nav { width: 48px; height: 48px; border-radius: 0; background: var(--line); color: var(--paper); font-size: 30px; line-height: 44px; }
.rp-gk .rp-g-nav:hover, .rp-gk .rp-g-nav:focus-visible { background: var(--red); color: #fff; }
.rp-gk .rp-g-count { top: 0; right: 0; padding: 6px 12px; background: var(--line); color: var(--paper); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.rp-gk .rp-g-thumbs { gap: 10px; padding: 14px 0 0; }
.rp-gk .rp-g-thumb { border: 1.5px solid var(--line); opacity: .55; }
.rp-gk .rp-g-thumb:hover { opacity: 1; }
.rp-gk .rp-g-thumb.is-active { border: 2px solid var(--red); opacity: 1; }

/* Blog index */
.post-list { border-top: 1.5px solid var(--line); }
.post-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.prose a.post-row { color: inherit; }
.post-row time { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.post-row b { display: block; font-stretch: 80%; font-weight: 900; font-size: 22px; line-height: 1.15; text-transform: uppercase; }
.post-row .excerpt { display: block; margin-top: 6px; font-size: 15px; color: #3A3934; }
.post-row i { font-style: normal; font-size: 20px; color: var(--red); transition: transform .15s ease; }
.post-row:hover b { color: var(--red); }
.post-row:hover i { transform: translateX(4px); }
.prose .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.prose .pagination .page-numbers { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); color: var(--line); text-decoration: none; font-weight: 700; }
.prose .pagination .page-numbers.current, .prose .pagination a.page-numbers:hover { background: var(--line); color: var(--paper); }
.prose .pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.empty { max-width: 40em; padding: 28px 32px; border: 1.5px solid var(--line); background: var(--paper-2); }
.rp-gk .prose .empty h3 { margin-top: 0; }
.empty .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rp-gk .prose .btn { color: #fff; }
.rp-gk .btn.ghost { background: transparent; color: var(--line); border: 1.5px solid var(--line); }
.rp-gk .btn.ghost:hover { background: var(--line); color: var(--paper); }

@media (max-width: 900px) {
  .rp-gk .rp-g-filters { width: auto; flex-wrap: wrap; }
  .rp-gk .rp-g-filter { flex: 1 1 auto; border-bottom: 1px solid var(--line); margin-bottom: -1px; }
  .rp-gk .rp-g-nav { width: 40px; height: 40px; font-size: 26px; line-height: 36px; }
  .post-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
  .post-row time { grid-column: 1 / -1; }
  .post-row b { font-size: 19px; }
  .empty { padding: 22px 18px; }

  .page-hero .head { padding: 36px 20px 28px; border-right: 0; border-bottom: 1px solid var(--line); }
  .kicker { margin-bottom: 20px; }
  .toc { padding-top: 24px; grid-template-columns: minmax(0, 1fr); }
  .rp-halaman h1 { font-size: clamp(40px, 11vw, 56px); }
  .page-hero .titleblock .wide { grid-column: span 2; border-right: 0; }
  .page-hero .titleblock .price { grid-column: auto; border-right: 1px solid var(--line); }
  .page-hero .titleblock div:nth-child(3) { grid-column: auto; border-right: 0; }
  .sheet .sec { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sec .viewtitle { position: static; gap: 8px; }
  .prose table { font-size: 14px; }
  .prose th, .prose td { padding: 9px 10px; }
  .prose tbody td:first-child { width: 38%; font-size: 12px; }
  .prose .wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .rp-gk .prose h3 { font-size: 19px; }
  .faq .answer { padding: 0 0 20px 48px; }
  .other-list { grid-template-columns: minmax(0, 1fr); }
}

/* Rupadhi: artikel tanpa nomor lembar (14.x) */
.toc.tanpa-nomor a { grid-template-columns: minmax(0, 1fr); }
.viewtitle.tanpa-nomor { gap: 0; }