/* ==============================================================================
   Curios Blog — blog.css
   Loaded after style.css and responsive.css from curios-it.eu.
   1. Re-maps the template's CSS variables to the Curios blog palette so the shared
      header, footer, buttons and typography adopt the scheme without touching style.css.
   2. Adds the blog components. Every blog class is prefixed "cb-" to avoid collisions
      with the template's own .blog-* rules.
   ============================================================================== */

:root {
    /* Palette */
    --curios-blue: #1B75BB;     /* primary accent */
    --electric-blue: #2A9FD6;   /* secondary accent */
    --light-blue: #E8F4FD;      /* tints and highlight panels */
    --dark-navy: #0D1B2A;       /* dark backgrounds */
    --deep-navy: #1A2D42;
    --white: #FFFFFF;           /* main background */
    --off-white: #F8F9FA;       /* card backgrounds */
    --light-gray: #E9ECEF;      /* borders and dividers */
    --dark-text: #1A1A2E;       /* body text */
    --medium-gray: #6C757D;     /* secondary text */
    --muted: #ADB5BD;           /* tertiary text */

    /* Template variable re-map (see assets/css/style.css :root) */
    --dark1: var(--dark-text);
    --dark2: var(--medium-gray);
    --light_white: var(--off-white);
    --primary_color: var(--curios-blue);
    --primary_color2: var(--electric-blue);
    --primary_light: var(--light-blue);
    --primary_light2: rgb(27 117 187 / 10%);
    --gray: var(--light-gray);
}

/* Hard-coded template colours that bypass the variables */
.theme-btn2 { background: rgb(27 117 187 / 10%); }
/* The footer keeps the curios-it.eu background (#1C1C1C) so it is identical across both sites. */
.footer-area { background: #1C1C1C; }
.header-area { border-bottom-color: var(--light-gray); }
.header-area .navbar-wrapper ul li a[aria-current="page"] { color: var(--curios-blue); }

body.cb-body { color: var(--dark-text); background: var(--white); }
.cb-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.cb-skip { position: absolute; left: -9999px; top: 0; background: var(--curios-blue); color: #fff; padding: 10px 16px; z-index: 3000; }
.cb-skip:focus { left: 16px; top: 16px; }

/* ------------------------------------------------------------------ Hero bands */
.cb-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, var(--dark-navy) 0%, var(--deep-navy) 100%);
    padding: 96px 0 72px;
}
.cb-hero::before {
    content: ''; position: absolute; right: -12%; bottom: -55%; width: 58%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 159, 214, .28) 0%, rgba(42, 159, 214, 0) 65%); pointer-events: none;
}
.cb-hero::after {
    content: ''; position: absolute; left: -8%; top: -60%; width: 36%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(27, 117, 187, .22) 0%, rgba(27, 117, 187, 0) 65%); pointer-events: none;
}
.cb-hero > * { position: relative; z-index: 1; }
.cb-hero .section-subtitle { color: var(--electric-blue); margin-bottom: 18px; display: block; }
.cb-hero h1 {
    font-family: var(--font_yantramanv); font-weight: 500; color: #fff;
    font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -1.5px; margin: 0 0 22px; max-width: 980px;
}
.cb-hero p.cb-lead { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55; color: rgba(255, 255, 255, .78); max-width: 720px; margin: 0; }
.cb-hero--compact { padding: 72px 0 56px; }
.cb-hero--compact h1 { font-size: clamp(34px, 4.6vw, 60px); }
.cb-hero .cb-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .65); margin-bottom: 20px; }
.cb-hero .cb-kicker a { color: rgba(255, 255, 255, .85); }
.cb-hero .cb-kicker a:hover { color: #fff; }

.cb-search { margin-top: 36px; max-width: 560px; position: relative; }
.cb-search input {
    width: 100%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff;
    border-radius: 30px; padding: 15px 52px 15px 24px; font-size: 16px; font-family: var(--font_dm); transition: .2s;
}
.cb-search input::placeholder { color: rgba(255, 255, 255, .55); }
.cb-search input:focus { border-color: var(--electric-blue); background: rgba(255, 255, 255, .12); outline: none; box-shadow: 0 0 0 4px rgba(42, 159, 214, .2); }
.cb-search i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--electric-blue); pointer-events: none; }

/* ------------------------------------------------------------------ Listing */
.cb-listing { padding: 0 0 110px; }
.cb-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 28px 0 20px; border-bottom: 1px solid var(--light-gray); }
.cb-filters-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-right: 6px; font-family: var(--font_syne); }
.cb-chip {
    border: 1px solid var(--light-gray); background: var(--white); color: var(--medium-gray); border-radius: 30px;
    padding: 8px 18px; font-size: 14px; font-weight: 500; cursor: pointer; transition: .2s; font-family: inherit; line-height: 1.2;
}
.cb-chip:hover { border-color: var(--electric-blue); color: var(--curios-blue); }
.cb-chip.is-active { background: var(--curios-blue); border-color: var(--curios-blue); color: #fff; }
.cb-chip .cb-count { opacity: .65; margin-left: 6px; font-size: 12px; }
.cb-results { margin-left: auto; font-size: 14px; color: var(--muted); }

.cb-featured {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center;
    background: var(--light-blue); border-radius: 18px; padding: 28px; margin: 40px 0 56px;
}
.cb-featured.is-hidden { display: none; }
.cb-featured-img { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--white); }
.cb-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.cb-featured:hover .cb-featured-img img { transform: scale(1.04); }
.cb-featured-label { font-family: var(--font_syne); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--curios-blue); display: block; margin-bottom: 14px; }
.cb-featured h2 { font-family: var(--font_yantramanv); font-size: clamp(28px, 3vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -.5px; margin: 12px 0 16px; }
.cb-featured h2 a { color: var(--dark-text); }
.cb-featured h2 a:hover { color: var(--curios-blue); }
.cb-featured p { font-size: 17px; line-height: 1.6; color: var(--medium-gray); margin: 0 0 24px; }
.cb-featured .cb-meta { margin-top: 22px; }

.cb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cb-grid:not(.is-filtering) .cb-card[data-cb-featured-card] { display: none; }
.cb-card {
    display: flex; flex-direction: column; background: var(--off-white); border: 1px solid var(--light-gray);
    border-radius: 14px; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.cb-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(13, 27, 42, .09); border-color: transparent; }
.cb-card.is-hidden { display: none; }
.cb-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--light-blue); display: block; }
.cb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.cb-card:hover .cb-card-img img { transform: scale(1.05); }
.cb-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.cb-card h3 { font-family: var(--font_yantramanv); font-size: 24px; line-height: 1.15; font-weight: 500; margin: 12px 0 10px; letter-spacing: -.3px; }
.cb-card h3 a { color: var(--dark-text); }
.cb-card h3 a:hover { color: var(--curios-blue); }
.cb-card p { font-size: 15px; line-height: 1.6; color: var(--medium-gray); margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-card .cb-meta { margin-top: auto; }
.cb-empty { display: none; text-align: center; padding: 72px 0 24px; color: var(--medium-gray); font-size: 17px; }
.cb-empty.is-visible { display: block; }
.cb-empty strong { color: var(--dark-text); font-family: var(--font_yantramanv); font-size: 26px; font-weight: 500; display: block; margin-bottom: 8px; }

/* ------------------------------------------------------------------ Shared bits */
.cb-pill {
    display: inline-block; background: var(--light-blue); color: var(--curios-blue); border-radius: 30px;
    font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 6px 12px; line-height: 1; transition: .2s;
}
.cb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
a.cb-pill:hover { background: var(--curios-blue); color: #fff; }
.cb-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--medium-gray); flex-wrap: wrap; }
.cb-meta a { color: var(--dark-text); font-weight: 500; }
.cb-meta a:hover { color: var(--curios-blue); }
.cb-meta .cb-dot { color: var(--muted); }
.cb-meta .cb-when { white-space: nowrap; }
.cb-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none; letter-spacing: .5px;
    background: linear-gradient(135deg, var(--curios-blue), var(--electric-blue)); color: #fff; font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; font-family: var(--font_dm);
}
.cb-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.cb-section-head h2 { font-family: var(--font_yantramanv); font-size: 36px; font-weight: 500; margin: 0; letter-spacing: -.5px; color: var(--dark-text); }
.cb-section-head a { color: var(--curios-blue); font-weight: 500; }
.cb-section-head a:hover { color: var(--electric-blue); }

/* ------------------------------------------------------------------ Post page */
.cb-post-hero { padding: 80px 0 170px; }
.cb-post-hero h1 { font-size: clamp(34px, 4.6vw, 64px); max-width: 920px; margin-bottom: 0; }
.cb-post-hero .cb-pills { margin-bottom: 22px; }
.cb-post-hero .cb-pill { background: rgba(42, 159, 214, .18); color: #9ADCF8; }
.cb-post-hero a.cb-pill:hover { background: var(--electric-blue); color: #fff; }
.cb-post-hero .cb-meta { color: rgba(255, 255, 255, .72); font-size: 15px; margin-top: 30px; }
.cb-post-hero .cb-meta a { color: #fff; }
.cb-post-hero .cb-meta a:hover { color: var(--electric-blue); }
.cb-post-hero .cb-meta .cb-dot { color: rgba(255, 255, 255, .35); }
.cb-post-hero .cb-avatar { background: #fff; color: var(--curios-blue); }

.cb-post-figure { max-width: 1100px; margin: -120px auto 0; padding: 0 24px; position: relative; z-index: 2; }
.cb-post-figure img {
    width: 100%; height: auto; display: block; border-radius: 16px; aspect-ratio: 2 / 1; object-fit: cover;
    box-shadow: 0 24px 60px rgba(13, 27, 42, .18); border: 1px solid var(--light-gray); background: var(--light-blue);
}
.cb-article { max-width: 800px; margin: 0 auto; padding: 64px 24px 0; }
.cb-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--curios-blue), var(--electric-blue)); z-index: 2000; pointer-events: none; }

.cb-prose { font-size: 18px; line-height: 1.75; color: var(--dark-text); word-wrap: break-word; }
.cb-prose > :first-child { margin-top: 0; }
.cb-prose p { margin: 0 0 24px; font-size: inherit; line-height: inherit; color: inherit; }
.cb-prose h2, .cb-prose h3, .cb-prose h4, .cb-prose h5 {
    font-family: var(--font_yantramanv); font-weight: 500; color: var(--dark-text); line-height: 1.2; margin: 48px 0 16px; letter-spacing: -.3px;
}
.cb-prose h2 { font-size: 36px; }
.cb-prose h3 { font-size: 28px; }
.cb-prose h4 { font-size: 22px; }
.cb-prose h5 { font-size: 19px; }
.cb-prose h2 + h3, .cb-prose h3 + h4 { margin-top: 12px; }
.cb-prose a { color: var(--curios-blue); text-decoration: underline !important; text-decoration-color: rgba(27, 117, 187, .35); text-underline-offset: 3px; }
.cb-prose a:hover { text-decoration-color: currentColor; color: var(--electric-blue); }
.cb-prose ul, .cb-prose ol { margin: 0 0 24px; padding-left: 28px; }
.cb-prose ul { list-style: disc; }
.cb-prose ol { list-style: decimal; }
.cb-prose li { margin-bottom: 8px; }
.cb-prose li > ul, .cb-prose li > ol { margin: 8px 0 0; }
.cb-prose li::marker { color: var(--curios-blue); }
.cb-prose strong { font-weight: 700; }
.cb-prose em { font-style: italic; }
.cb-prose img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 0 auto; }
.cb-prose figure { margin: 36px 0; }
.cb-prose figure.aligncenter, .cb-prose .has-text-align-center { text-align: center; }
.cb-prose figcaption { text-align: center; font-size: 14px; color: var(--muted); margin-top: 10px; }
.cb-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .88em; background: var(--light-blue); color: var(--curios-blue); padding: 2px 6px; border-radius: 5px; }
.cb-prose pre {
    position: relative; background: var(--dark-navy); color: var(--light-blue); border: 1px solid var(--deep-navy); border-radius: 12px;
    padding: 22px 24px; overflow-x: auto; font-size: 14px; line-height: 1.6; margin: 0 0 28px; white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.cb-prose pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.cb-prose pre.wp-block-preformatted { white-space: pre-wrap; }
.cb-copy-btn {
    position: absolute; top: 10px; right: 10px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff;
    font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-family: var(--font_dm); opacity: 0; transition: .2s;
}
.cb-prose pre:hover .cb-copy-btn, .cb-copy-btn:focus { opacity: 1; }
.cb-copy-btn.is-copied { background: var(--electric-blue); border-color: var(--electric-blue); }
.cb-prose blockquote { border-left: 4px solid var(--curios-blue); background: var(--light-blue); padding: 22px 28px; border-radius: 0 12px 12px 0; margin: 32px 0; font-size: 19px; }
.cb-prose blockquote p:last-child { margin-bottom: 0; }
.cb-prose blockquote cite { display: block; margin-top: 10px; font-size: 14px; color: var(--medium-gray); font-style: normal; }
.cb-prose .wp-block-table { overflow-x: auto; margin: 0 0 28px; }
.cb-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.cb-prose th, .cb-prose td { border: 1px solid var(--light-gray); padding: 10px 14px; text-align: left; vertical-align: top; }
.cb-prose thead th, .cb-prose tr:first-child th { background: var(--light-blue); color: var(--dark-text); font-weight: 600; }
.cb-prose tbody tr:nth-child(even) td { background: var(--off-white); }
.cb-prose mark { background: #FFF3BF; padding: 0 3px; }
.cb-prose hr { border: 0; border-top: 1px solid var(--light-gray); margin: 40px 0; }
.cb-prose .wp-block-columns { display: flex; gap: 24px; flex-wrap: wrap; }
.cb-prose .wp-block-column { flex: 1 1 280px; min-width: 0; }

.cb-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--light-gray); }
.cb-tags-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.cb-tag { font-size: 13px; color: var(--medium-gray); border: 1px solid var(--light-gray); border-radius: 30px; padding: 6px 14px; background: var(--white); transition: .2s; }
.cb-tag:hover { color: var(--curios-blue); border-color: var(--electric-blue); }
.cb-author-box { display: flex; gap: 20px; align-items: center; background: var(--off-white); border: 1px solid var(--light-gray); border-radius: 14px; padding: 24px 28px; margin-top: 40px; }
.cb-author-box .cb-avatar { width: 64px; height: 64px; font-size: 20px; }
.cb-author-box h4 { font-family: var(--font_yantramanv); font-size: 22px; font-weight: 500; margin: 0 0 4px; }
.cb-author-box h4 a { color: var(--dark-text); }
.cb-author-box h4 a:hover { color: var(--curios-blue); }
.cb-author-box p { margin: 0; color: var(--medium-gray); font-size: 15px; }
.cb-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
.cb-postnav a { display: block; border: 1px solid var(--light-gray); border-radius: 12px; padding: 18px 20px; color: var(--dark-text); transition: .2s; background: var(--white); }
.cb-postnav a:hover { border-color: var(--electric-blue); background: var(--light-blue); }
.cb-postnav span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 6px; }
.cb-postnav strong { font-weight: 500; font-size: 16px; line-height: 1.35; display: block; }
.cb-postnav .cb-next { text-align: right; }
.cb-related { padding: 80px 0 110px; background: var(--off-white); border-top: 1px solid var(--light-gray); margin-top: 80px; }
.cb-related .cb-card { background: var(--white); }

/* ------------------------------------------------------------------ Responsive */
@media (max-width: 1100px) {
    .cb-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .cb-featured { grid-template-columns: 1fr; gap: 24px; padding: 18px; }
}
@media (max-width: 640px) {
    .cb-container { padding: 0 16px; }
    .cb-grid { grid-template-columns: 1fr; gap: 20px; }
    .cb-hero { padding: 60px 0 48px; }
    .cb-hero--compact { padding: 48px 0 40px; }
    .cb-post-hero { padding: 48px 0 120px; }
    .cb-post-figure { margin-top: -90px; padding: 0 16px; }
    .cb-post-figure img { aspect-ratio: 16 / 10; border-radius: 12px; }
    .cb-article { padding: 40px 16px 0; }
    .cb-prose { font-size: 17px; }
    .cb-prose h2 { font-size: 28px; }
    .cb-prose h3 { font-size: 24px; }
    .cb-prose h4 { font-size: 20px; }
    .cb-prose pre { padding: 18px 16px; font-size: 13px; }
    .cb-prose blockquote { padding: 18px 20px; font-size: 17px; }
    .cb-postnav { grid-template-columns: 1fr; }
    .cb-postnav .cb-next { text-align: left; }
    .cb-author-box { flex-direction: column; align-items: flex-start; padding: 20px; }
    .cb-results { margin-left: 0; width: 100%; }
    .cb-featured { margin: 28px 0 36px; }
    .cb-related { padding: 56px 0 72px; margin-top: 56px; }
    .cb-section-head h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .cb-card, .cb-card-img img, .cb-featured-img img { transition: none; }
}