/* ==========================================================================
   Onosites - halaman publik (§34-§39)
   ========================================================================== */

/* --- Hero (§34) ---------------------------------------------------------- */

.hero {
    padding-block: clamp(var(--space-lg), 12vw, var(--space-2xl)) clamp(var(--space-lg), 8vw, var(--space-xl));
}

.hero__greeting {
    display: block;
    margin-bottom: var(--space-sm);
}

/* Aksen karamel dipakai sebagai garis, bukan sebagai warna teks: di atas krem
   karamel hanya 2,3:1 - cukup untuk hiasan, tidak cukup untuk huruf. */
.hero__greeting::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 2px;
    margin-right: 0.6rem;
    vertical-align: middle;
    border-radius: var(--radius-full);
    background: var(--color-accent);
}

.hero__title {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    line-height: 1.03;
    max-width: 16ch;
}

.hero__intro {
    max-width: 52ch;
    margin-top: var(--space-md);
}

.hero__actions { margin-top: var(--space-lg); }

/* --- Selected work (§35) -------------------------------------------------- */

/* Bukan grid kartu seragam: tiap project mendapat baris penuh dengan sisi
   gambar bergantian, sehingga daftar terbaca seperti halaman majalah
   alih-alih katalog. */
.work-item {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(var(--space-md), 4vw, var(--space-lg));
    padding-block: clamp(var(--space-md), 5vw, var(--space-lg));
}

.work-item + .work-item { border-top: 1px solid var(--color-border); }

.work-item:nth-child(even) .work-item__media { order: -1; }

.work-item__index {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
}

.work-item__title {
    margin-block: var(--space-2xs) var(--space-xs);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
}

.work-item__title a { text-decoration: none; }

.work-item__summary {
    max-width: 46ch;
    color: var(--color-text-muted);
}

.work-item__meta {
    margin-top: var(--space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

.work-item__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

.work-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.work-item:hover .work-item__media img { transform: scale(1.02); }

.work-item__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 4rem);
    color: var(--color-border-strong);
}

@media (max-width: 52rem) {
    .work-item {
        grid-template-columns: 1fr;
    }

    .work-item:nth-child(even) .work-item__media { order: 0; }
    .work-item__media { order: -1; }
}

/* --- About / expertise / experience (§36) --------------------------------- */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(var(--space-md), 5vw, var(--space-lg));
    align-items: start;
}

.about-portrait {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    color: var(--color-border-strong);
    font-family: var(--font-display);
    font-size: 3rem;
}

.about-portrait img { width: 100%; height: 100%; object-fit: cover; }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2 { margin-top: var(--space-lg); }
.prose h3 { margin-top: var(--space-md); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.3rem; }
.prose img { border-radius: var(--radius-md); margin-block: var(--space-md); }
.prose blockquote {
    padding-left: var(--space-sm);
    border-left: 2px solid var(--color-primary);
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-text-muted);
}
.prose pre {
    padding: var(--space-sm);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.expertise-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-md);
    list-style: none;
    padding: 0;
}

.expertise-list h3 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.expertise-list p { font-size: 0.9rem; color: var(--color-text-muted); }

.timeline { list-style: none; padding: 0; }

.timeline li {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-sm);
}

.timeline li + li { border-top: 1px solid var(--color-border); }

.timeline__when {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    padding-top: 0.2rem;
}

.timeline__what h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.timeline__what p { font-size: 0.92rem; color: var(--color-text-muted); }

@media (max-width: 48rem) {
    .about-grid { grid-template-columns: 1fr; }
    .timeline li { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* --- Daftar artikel (§38) ------------------------------------------------- */

.article-list { list-style: none; padding: 0; }

.article-row {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-md);
}

.article-row + .article-row { border-top: 1px solid var(--color-border); }

.article-row__date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding-top: 0.35rem;
}

.article-row__title {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    margin-bottom: 0.3rem;
}

.article-row__title a { text-decoration: none; }
.article-row__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.article-row__excerpt { color: var(--color-text-muted); max-width: 62ch; }

@media (max-width: 40rem) {
    .article-row { grid-template-columns: 1fr; gap: var(--space-2xs); }
    .article-row__date { padding-top: 0; }
}

/* --- Detail artikel / project --------------------------------------------- */

.entry-header {
    padding-block: clamp(var(--space-lg), 7vw, var(--space-xl)) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.entry-header h1 { max-width: 22ch; }

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    margin-top: var(--space-sm);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.entry-cover {
    margin-block: var(--space-lg);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.entry-body { padding-block: var(--space-lg); }

/* --- Filter kategori project ---------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-bottom: var(--space-lg);
}

.filter-bar a {
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--color-text-muted);
}

.filter-bar a:hover { border-color: var(--color-text-muted); color: var(--color-text); }

.filter-bar a[aria-current="true"] {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-bg);
}

/* --- Kontak (§39) ---------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(var(--space-md), 5vw, var(--space-lg));
    align-items: start;
}

.contact-links { list-style: none; padding: 0; }
.contact-links li + li { margin-top: var(--space-xs); }

.contact-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: var(--color-text-muted);
}

.contact-links a:hover { color: var(--color-text); }

@media (max-width: 48rem) {
    .contact-grid { grid-template-columns: 1fr; }
}

/* --- CTA penutup ------------------------------------------------------------ */

.cta {
    padding-block: clamp(var(--space-lg), 9vw, var(--space-xl));
    text-align: center;
}

.cta h2 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    max-width: 18ch;
    margin-inline: auto;
}

.cta p { margin-top: var(--space-sm); }
.cta .btn { margin-top: var(--space-md); }

/* --- Halaman error (§46) ------------------------------------------------- */

.error-page {
    display: grid;
    place-items: center;
    min-height: 70dvh;
    text-align: center;
    padding: var(--space-lg) var(--space-sm);
}

.error-page__code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
}

.error-page h1 { margin-block: var(--space-xs) var(--space-sm); }
.error-page p { max-width: 46ch; margin-inline: auto; color: var(--color-text-muted); }
.error-page .btn { margin-top: var(--space-md); }