/* ============================================================
   OVERMIJ.CSS  —  Exclusief voor overmij.html
   Vereist: smra.css
   ============================================================ */

/* ── HERO ── */
.om-hero {
    background: var(--paper-dark);
    border-bottom: 2px solid var(--rule-heavy);
}
.om-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 40px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 64px;
    align-items: center;
}
.om-label {
    font-family: var(--font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--title-color);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.2rem;
}
.om-label::before { content: '◆'; font-size: 0.4rem; }

.om-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1.05;
    margin-bottom: 0.5rem;
}
.om-hero-sub {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1.5rem;
}
.om-hero-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-soft);
    line-height: 1.7;
    padding-left: 1.2rem;
    border-left: 3px solid var(--title-color);
    max-width: 48ch;
}
.om-hero-tagline em { font-style: italic; }

.om-hero-photo {
    position: relative;
}
.om-hero-photo::before {
    content: '';
    position: absolute;
    inset: -12px -12px 12px 12px;
    border: 2px solid var(--rule);
    z-index: 0;
}
.om-hero-photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    display: block;
    position: relative;
    z-index: 1;
    filter: sepia(12%) contrast(1.06);
    transition: filter 0.4s;
}
.om-hero-photo:hover img { filter: sepia(0%) contrast(1.08); }

/* ── HOOFD CONTENT ── */
.om-main {
    background: var(--paper);
}
.om-main-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 40px 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 64px;
    align-items: start;
}

/* ── ARTIKEL ── */
.om-section-label {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--title-color);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.6rem;
    margin-top: 2.5rem;
}
.om-section-label:first-child { margin-top: 0; }
.om-section-label::before { content: '◆'; font-size: 0.38rem; }

.om-article h2 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
}
.om-article p {
    font-family: var(--font-body);
    font-size: 0.94rem;
    color: var(--ink-soft);
    line-height: 1.9;
    margin-bottom: 1rem;
}

.om-quote {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    background: var(--paper-dark);
    border-left: 4px solid var(--title-color);
}
.om-quote p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.75;
    margin: 0;
}

/* ── SIDEBAR ── */
.om-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 32px;
}

.om-fact-block,
.om-contact-block {
    background: var(--paper-dark);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--title-color);
    padding: 1.4rem 1.5rem;
}
.om-fact-block h3,
.om-contact-block h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}

/* Feitenlijst */
.om-fact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.om-fact-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: 0.78rem;
}
.om-fact-list li:last-child { border-bottom: none; }
.om-fact-label {
    color: var(--ink-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.om-fact-value {
    color: var(--ink);
    font-weight: 700;
    text-align: right;
}

/* Wat ik doe lijst */
.om-icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.om-icon-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--ink-soft);
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rule);
}
.om-icon-list li:last-child { border-bottom: none; }
.om-icon-list img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: sepia(30%) contrast(1.1);
    flex-shrink: 0;
}

/* Contact blok */
.om-contact-block p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--ink-soft);
    line-height: 1.65;
    margin-bottom: 1rem;
}
.om-btn {
    display: block;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--ink);
    transition: all 0.25s;
    margin-bottom: 8px;
}
.om-btn:hover {
    background: var(--title-color);
    border-color: var(--title-color);
    color: #fff;
}
.om-btn-outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--rule-heavy);
}
.om-btn-outline:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

/* ── BOEKLIJST IN SIDEBAR ── */
.om-book-list {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
    width: 100%;
}
.om-book-list li {
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-style: italic;
    color: var(--ink);
    padding: 2px 0 2px 10px;
    border-left: 2px solid var(--title-color);
    margin-bottom: 3px;
}

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
    .om-hero-inner  { grid-template-columns: 1fr; gap: 40px; }
    .om-hero-photo  { max-width: 380px; }
    .om-main-inner  { grid-template-columns: 1fr; gap: 40px; }
    .om-sidebar     { position: static; }
}
@media (max-width: 600px) {
    .om-hero-inner,
    .om-main-inner  { padding: 40px 24px; }
    .om-hero-photo::before { display: none; }
}