/* ==========================================================================
   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); }

/* --- Editorial commerce ------------------------------------------------ */
.editorial-header { padding-block: clamp(var(--space-lg), 9vw, var(--space-xl)); background: var(--color-hero); color: #202326; }
.editorial-header h1 { max-width: 14ch; font-size: clamp(2.75rem, 8vw, 6rem); }
.editorial-header .lead { max-width: 48ch; }
.editorial-header--food { border-bottom: 0.35rem solid var(--color-fnb); }
.quiet-empty { padding-block: var(--space-xl); text-align: center; color: var(--color-text-muted); }

.product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)); gap:var(--space-md); }
.product-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; }
.product-card__media { display:grid; place-items:center; aspect-ratio:1; background:color-mix(in srgb,var(--color-store) 18%,var(--color-surface)); font-family:var(--font-display); font-size:3rem; text-decoration:none; }
.product-card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-normal); }
.product-card:hover .product-card__media img { transform:scale(1.025); }
.product-card__body { padding:var(--space-sm); }
.product-card__body h2 { font-size:1.35rem; margin-block:var(--space-xs); }
.product-card__body h2 a { text-decoration:none; }
.product-card__meta { display:flex; justify-content:space-between; gap:var(--space-xs); margin-top:var(--space-sm); font-size:.9rem; }

.product-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(var(--space-md),6vw,var(--space-xl)); align-items:start; }
.product-detail__visual { display:grid; place-items:center; aspect-ratio:1; border-radius:var(--radius-lg); background:color-mix(in srgb,var(--color-store) 20%,var(--color-surface)); font-family:var(--font-display); font-size:clamp(4rem,12vw,9rem); }
.variant-list { list-style:none; padding:0; }
.variant-list li { display:flex; justify-content:space-between; gap:var(--space-sm); padding-block:var(--space-sm); border-bottom:1px solid var(--color-border); }
.variant-list li div { display:grid; gap:.2rem; }

.story-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr)); gap:var(--space-md); }
.story-card { padding:var(--space-md); min-height:16rem; background:var(--color-surface); border-top:.25rem solid var(--color-fnb); }
.story-card h2 { margin-block:var(--space-sm); font-size:clamp(1.5rem,3vw,2rem); }
.story-card h2 a { text-decoration:none; }
.story-card time { display:block; margin-top:var(--space-md); color:var(--color-text-muted); font-size:.85rem; }

@media (max-width:48rem) { .product-detail { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .product-card__media img { transition:none; } }

/* --- Discovery homepage ------------------------------------------------ */
.discovery-hero { padding-block:clamp(var(--space-lg),9vw,var(--space-2xl)); background:var(--color-hero); color:#202326; }
.discovery-hero__grid { display:grid; grid-template-columns:minmax(0,3fr) minmax(16rem,2fr); gap:var(--space-lg); align-items:center; }
.discovery-hero h1 { font-size:clamp(3.25rem,9vw,7.5rem); max-width:10ch; }
.discovery-hero .lead { max-width:44ch; margin-block:var(--space-md); }
.discovery-hero__art { position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 4%,var(--color-ai) 5% 28%,var(--color-store) 29% 55%,var(--color-fnb) 56% 72%,var(--color-nav) 73%); box-shadow:var(--shadow-lg); }
.discovery-hero__art span { color:#fff; font-family:var(--font-display); font-size:clamp(5rem,15vw,11rem); z-index:2; }
.discover-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:var(--space-sm); }
.discover-card { min-height:18rem; padding:var(--space-md); border:1px solid var(--color-border); border-top:.3rem solid var(--color-natural); background:var(--color-surface); text-decoration:none; transition:transform var(--transition-normal),box-shadow var(--transition-normal); }
.discover-card:hover { transform:translateY(-.25rem); box-shadow:var(--shadow-md); }
.discover-card>span { font-family:var(--font-mono); color:var(--color-text-muted); }
.discover-card h3 { margin-top:var(--space-lg); font-size:2rem; }
.discover-card--store { border-top-color:var(--color-store); }.discover-card--food { border-top-color:var(--color-fnb); }.discover-card--ai { border-top-color:var(--color-ai); }
.section--food { background:color-mix(in srgb,var(--color-fnb) 7%,var(--color-bg)); }
.lab-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:var(--space-sm); }
.lab-grid article { padding:var(--space-md); border-left:.2rem solid var(--color-natural); background:var(--color-surface); }
.about-discovery { padding-block:var(--space-xl); background:var(--color-footer); color:#faf8f3; }
.about-discovery h2 { max-width:24ch; font-size:clamp(2rem,5vw,4rem); margin-block:var(--space-sm); }
@media(max-width:48rem){.discovery-hero__grid{grid-template-columns:1fr}.discovery-hero__art{max-width:22rem;margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.discover-card{transition:none}.discover-card:hover{transform:none}}
.ai-hero { padding-block:clamp(var(--space-lg),9vw,var(--space-xl)); background:linear-gradient(135deg,color-mix(in srgb,var(--color-ai) 16%,var(--color-hero)),var(--color-hero)); }
.ai-hero h1 { max-width:12ch; font-size:clamp(3rem,8vw,6rem); }
.ai-shell { max-width:52rem; }.ai-answer { margin-top:var(--space-md); padding:var(--space-md); border-left:.25rem solid var(--color-ai); background:var(--color-surface); }.ai-answer h2 { margin-block:var(--space-xs); }