/* ============================================================
   KLARCA LIBRARY — Shared styles for component product pages
   ============================================================
   Depends on: /assets/css/style.css (PP Mori font, brand tokens)
   ============================================================ */

/* ── Root ── */
:root {
    --lib-max-width:    1100px;
    --lib-pad-x:        48px;
    --lib-pad-section:  64px;
    --lib-panel-offset: 80px;
}

html, body {
    background: #FAFAF7;
}

a { color: inherit; text-decoration: none; }

/* ── Container ── */
.lib-container {
    max-width: var(--lib-max-width);
    margin: 0 auto;
    padding: 0 var(--lib-pad-x);
}

/* ============================================================
   BACKGROUND — blurred klarca.com iframe
   ============================================================ */
.lib-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.lib-bg-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    pointer-events: none;
    filter: blur(6px);
    transform: scale(1.06);
    transform-origin: center top;
}

.lib-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 28, 0.45);
}

/* ============================================================
   CLOSE BUTTON — rounded square, inside panel top-right
   ============================================================ */
.lib-close {
    position: fixed;
    top: calc(var(--lib-panel-offset) + 16px);
    right: 24px;
    z-index: 100;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #1C1C1E;
    color: #FAFAF7;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.15s;
}

.lib-close:hover { opacity: 0.7; }

/* ============================================================
   PANEL
   ============================================================ */
.lib-panel {
    position: fixed;
    top: var(--lib-panel-offset);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #FAFAF7;
    border-radius: 12px 12px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================================
   TOP NAV
   ============================================================ */
.lib-topnav {
    max-width: var(--lib-max-width);
    margin: 0 auto;
    padding: 40px var(--lib-pad-x) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lib-topnav-logo {
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.lib-topnav-logo:hover  { opacity: 0.65; }
.lib-topnav-logo:active { opacity: 0.4; transform: scale(0.97); }

.lib-topnav-logo img {
    height: 24px;
    width: auto;
    display: block;
}

.lib-back-link {
    font-size: 14px;
    color: #1A1A1C;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    transition: text-decoration 0.15s ease;
}

.lib-back-link:hover  { text-decoration: none; }
.lib-back-link:active { opacity: 0.5; transform: scale(0.96); }

/* ============================================================
   COMPONENT INTRO
   ============================================================ */
.lib-intro {
    max-width: var(--lib-max-width);
    margin: 80px auto 0;
    padding: 0 var(--lib-pad-x);
    display: flex;
    align-items: center;
    gap: 64px;
}

.lib-intro-left {
    flex: 1;
    min-width: 0;
}

.lib-intro-right {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.lib-intro-right .cookie-btn {
    flex: none;
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}

.lib-title {
    font-size: 24px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1A1A1C;
    margin-bottom: 10px;
}

.lib-subtitle {
    font-size: 14px;
    line-height: 1.4;
    color: #1A1A1C;
}

/* ── Badges ── */
.lib-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}

.lib-badges-row {
    max-width: var(--lib-max-width);
    margin: 28px auto 0;
    padding: 0 var(--lib-pad-x);
}

.lib-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    color: #6B6B6B;
    background: #EDEBE3;
    padding: 2px 8px 0;
    height: 24px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1;
    transition: opacity 0.2s ease;
    cursor: default;
}

.lib-badge:hover { opacity: 0.6; }

/* ============================================================
   LIVE PREVIEW
   ============================================================ */
.lib-preview-section {
    padding: var(--lib-pad-section) var(--lib-pad-x) 48px;
    max-width: var(--lib-max-width);
    margin: 0 auto;
}

.lib-label {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    color: #0A0A0A;
    margin-bottom: 16px;
}

.lib-preview-frame {
    width: 100%;
    height: 560px;
    border: 1px solid #E8E5DD;
    border-radius: 10px;
    background: #FAFAF7;
    display: block;
}

/* Full-viewport components (e.g. heroes) keep the default desktop height;
   only the narrow/mobile breakpoint gets a taller frame (see media query),
   where a 100svh layout would otherwise be cramped and the fixed header
   would overlap the content. */

/* Open in new tab — like Connect on X on homepage */
.lib-open-link {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    font-size: 12px;
    color: #6B6B6B;
    float: right;
}

.lib-open-text {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
    transition: text-decoration 0.15s;
}

.lib-open-link:hover .lib-open-text { text-decoration: none; }

.lib-open-arrow {
    margin-left: 4px;
}

/* ============================================================
   CLICKABLE TAGS (lib-badge as <a>)
   ============================================================ */
a.lib-badge {
    cursor: pointer;
    text-decoration: none;
}

/* ============================================================
   DETAIL — 2-column: code (2/3) + sidebar (1/3)
   ============================================================ */
.lib-detail {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 60px;
    max-width: var(--lib-max-width);
    margin: 0 auto;
    padding: var(--lib-pad-section) var(--lib-pad-x);
    clear: both;
}

/* ── Code column wrapper ── */
.lib-code-col {
    min-width: 0;
}

/* ── Code panel ── */
.lib-code-panel {
    background: #fff;
    border: 1px solid #E8E5DD;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.lib-code-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #E8E5DD;
    flex-shrink: 0;
}

.lib-code-filename {
    font-size: 12px;
    color: #6B6B6B;
    letter-spacing: 0.02em;
}

.lib-btn-copy-full {
    font-family: 'PP Mori', Georgia, serif;
    font-size: 12px;
    color: #1A1A1C;
    background: #EDEBE3;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    letter-spacing: 0.01em;
}

.lib-btn-copy-full:hover { background: #E5E2D9; }

.lib-code-body {
    display: flex;
    overflow: auto;
    height: 320px;
    flex: 1;
}

.lib-line-nums {
    font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.75;
    color: #C8C5BC;
    padding: 24px 16px 24px 20px;
    text-align: right;
    user-select: none;
    flex-shrink: 0;
    border-right: 1px solid #E8E5DD;
    white-space: pre;
}

.lib-code-pre {
    font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: #1A1A1C;
    padding: 24px 24px 24px 20px;
    white-space: pre;
    overflow-x: auto;
    flex: 1;
    margin: 0;
}

/* ── Code fade overlay + footer button ── */
.lib-code-fade {
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}

.lib-code-footer {
    padding: 16px 20px;
    border-top: 1px solid #E8E5DD;
    flex-shrink: 0;
}

.lib-btn-copy-code {
    font-family: 'PP Mori', Georgia, serif;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    height: 50px;
    background: #1A1A1C;
    color: #FAFAF7;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lib-btn-copy-code:hover  { background: rgba(26, 26, 28, 0.8); }
.lib-btn-copy-code:active { background: rgba(26, 26, 28, 0.95); transform: scale(0.97); }

/* ── Syntax highlight ── */
.hl-comment { color: #AEAAA2; }
.hl-tagname { color: #C4452D; }
.hl-attr    { color: #7C6A4E; }
.hl-string  { color: #2D7A5C; }

/* ── Sidebar ── */
.lib-sidebar {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.lib-sidebar-section {}

.lib-sidebar-heading {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: #1A1A1C;
    margin-bottom: 12px;
}

.lib-feature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Shared pill */
.lib-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #1A1A1C;
    background: #EDEBE3;
    padding: 7px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}

/* Filterable link badge — darker bg by default, arrow always visible */
a.lib-feature-badge {
    background: #D8D5CD;
    cursor: pointer;
    transition: background 0.15s;
}

a.lib-feature-badge::after {
    content: '→';
    font-size: 11px;
    display: inline-block;
}

a.lib-feature-badge:hover {
    background: #CECCBF;
}

/* Descriptive span badge */
span.lib-feature-badge {
    cursor: default;
}

/* ============================================================
   FEATURES + STACK — dark block (legacy, unused)
   ============================================================ */
.lib-info-section {
    padding: 0 var(--lib-pad-x) var(--lib-pad-section);
    max-width: var(--lib-max-width);
    margin: 0 auto;
    clear: both;
}

.lib-info-block {
    background: #1C1C1E;
    border-radius: 10px;
    padding: var(--lib-pad-section) 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
}

.lib-col-heading {
    font-size: 22px;
    line-height: 1.2;
    color: #FAFAF7;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.lib-col-text {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(250, 250, 247, 0.7);
}

/* ============================================================
   CODE SECTION
   ============================================================ */
.lib-code-section {
    padding: var(--lib-pad-section) var(--lib-pad-x);
    max-width: var(--lib-max-width);
    margin: 0 auto;
}

.lib-section-title {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #1A1A1C;
    margin-bottom: 24px;
}

/* Code block with rounded corners */
.lib-code-block {
    background: #1C1C1E;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.lib-code-block pre {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.75;
    color: #FAFAF7;
    white-space: pre;
    padding: 32px 32px 24px;
    overflow-x: auto;
}

.lib-code-comment { color: #6a9955; }

/* Copy code inside code block — inverted */
.lib-code-inner-actions {
    padding: 16px 24px;
    border-top: 1px solid rgba(250, 250, 247, 0.08);
    display: flex;
    justify-content: center;
}

.lib-btn-copy-inner {
    font-family: 'PP Mori', Georgia, serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1C1C1E;
    background: #FAFAF7;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.lib-btn-copy-inner:hover { opacity: 0.75; }

/* Download ZIP — secondary with border */
.lib-btn-download {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #1A1A1C;
    background: transparent;
    border: 3px solid #1A1A1C;
    padding: 10px 24px;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: 'PP Mori', Georgia, serif;
}

.lib-btn-download:hover { opacity: 0.6; }

/* ============================================================
   MORE FROM LIBRARY
   ============================================================ */
.lib-more-section {
    padding: var(--lib-pad-section) var(--lib-pad-x);
    max-width: var(--lib-max-width);
    margin: 0 auto;
    border-top: 1px solid #E8E5DD;
}

.lib-more-placeholder {
    font-size: 15px;
    color: #6B6B6B;
    margin-top: 4px;
}

/* ============================================================
   PANEL FOOTER
   ============================================================ */
.lib-footer {
    border-top: 1px solid #E8E5DD;
    padding: 28px 0;
}

.lib-footer-inner {
    max-width: var(--lib-max-width);
    margin: 0 auto;
    padding: 0 var(--lib-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lib-footer-copy,
.lib-footer-link {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6B6B6B;
    transition: color 0.15s;
}

.lib-footer-link:hover { color: #1A1A1C; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --lib-pad-x:        20px;
        --lib-pad-section:  40px;
    }

    /* Top nav — less top padding */
    .lib-topnav {
        padding-top: 24px;
    }

    /* Intro — keep two columns, tighten gap and top margin */
    .lib-intro {
        margin-top: 60px;
        gap: 32px;
        align-items: center;
    }

    .lib-title { font-size: 20px; }

    /* Buttons stay compact — no override needed, auto width is fine */
    .lib-intro-right .cookie-btn {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Live preview shorter */
    .lib-preview-frame { height: 420px; }
    /* …but full-viewport components stay tall so they don't overlap/crop */
    .lib-preview-frame--full { height: 100svh; min-height: 680px; }

    /* Code + sidebar stack vertically: code first, then sidebar */
    .lib-detail {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .lib-code-body { height: 280px; }
}