/* ============================================================
   URN blog (blog.php) — listing + article, built on urn-home.css.
   ============================================================ */

/* Branded category covers (replace stock photos) */
.blg-cover {
    --c: #083d44;
    position: relative; aspect-ratio: 16 / 9; border-radius: 14px 14px 0 0; overflow: hidden;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(135deg, var(--c) 0%, color-mix(in srgb, var(--c) 70%, #000) 100%);
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 18px 20px;
    color: #fff;
}
.blg-cover i { font-size: 30px; opacity: .92; }
.blg-cover span { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .92; }
.blg-cover::after {           /* faint grid texture */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 22px 22px;
}
.blg-cover--lg { aspect-ratio: 4 / 3; border-radius: 18px; }
.blg-cover--lg i { font-size: 44px; }

/* Listing */
.blg-hero h1 { max-width: 780px; }
.blg-featured {
    display: grid; grid-template-columns: 1fr; gap: 20px; text-decoration: none; color: var(--uh-ink-soft);
    margin-bottom: 40px;
}
.blg-featured h2 { font-family: var(--uh-display); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.12; color: var(--uh-ink); margin: 0 0 10px; text-wrap: balance; }
.blg-featured p { font-size: 17px; line-height: 1.55; margin: 0 0 10px; }
.blg-featured:hover h2 { color: var(--uh-blue); }
.blg-featured:focus-visible { outline: 3px solid var(--uh-orange); outline-offset: 4px; border-radius: 18px; }
@media (min-width: 860px) { .blg-featured { grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; } }

.blg-filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; margin-bottom: 18px; scrollbar-width: none; border-bottom: 1px solid var(--uh-line); }
.blg-filters::-webkit-scrollbar { display: none; }
.blg-chip {
    flex: 0 0 auto; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--uh-ink);
    background: #fff; border: 1px solid #cfd8d5; border-radius: 999px; padding: 8px 16px; min-height: 40px; cursor: pointer;
}
.blg-chip:hover { border-color: var(--uh-ink); }
.blg-chip.is-on { background: var(--uh-ink); border-color: var(--uh-ink); color: #fff; }
.blg-chip:focus-visible { outline: 3px solid var(--uh-orange); outline-offset: 2px; }

.blg-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.blg-card {
    display: flex; flex-direction: column; text-decoration: none; color: var(--uh-ink-soft);
    background: #fff; border: 1px solid var(--uh-line); border-radius: 14px; overflow: hidden;
    transition: transform .3s var(--uh-ease), box-shadow .3s var(--uh-ease), border-color .2s;
}
.blg-card[hidden] { display: none; }
.blg-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8, 61, 68, .09); border-color: #c9d3cf; color: var(--uh-ink-soft); }
.blg-card:focus-visible { outline: 3px solid var(--uh-orange); outline-offset: 3px; }
.blg-card .blg-cover { aspect-ratio: 16 / 7; }
.blg-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blg-card h3 { font-family: var(--uh-display); font-size: 20px; line-height: 1.22; color: var(--uh-ink); margin: 0; text-wrap: balance; }
.blg-card p { font-size: 15.5px; line-height: 1.5; margin: 0; }
.blg-card .blg-meta { margin-top: auto; padding-top: 6px; }
.blg-meta { font-size: 13.5px; color: var(--uh-ink-soft); }
@media (min-width: 700px) { .blg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .blg-grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .blg-card { transition: none; } .blg-card:hover { transform: none; } }

.blg-final .uh-lede { margin-bottom: 8px; }

/* Article */
.blg-narrow { max-width: 760px; }
.blg-head { padding: clamp(28px, 5vw, 56px) 0 24px; background: linear-gradient(180deg, #eef5fa 0%, #fff 100%); }
.blg-back { display: table; font-size: 15px; margin-bottom: 18px; }
.blg-back::after { content: none; }
.blg-back::before { content: "\2039  "; white-space: pre; }
.blg-cat { --c: #083d44; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c); margin: 0 0 10px; }
.blg-head h1 { font-family: var(--uh-display); font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -.02em; color: var(--uh-ink); margin: 0 0 12px; text-wrap: balance; }

.blg-body { font-size: 18px; line-height: 1.72; color: #22393d; padding: 8px 0 12px; }
.blg-body h2 { font-family: var(--uh-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.2; color: var(--uh-ink); margin: 40px 0 12px; }
.blg-body h3 { font-size: 20px; color: var(--uh-ink); margin: 28px 0 8px; }
.blg-body p { margin: 0 0 18px; }
.blg-body ul, .blg-body ol { margin: 0 0 18px; padding-left: 22px; }
.blg-body li { margin-bottom: 8px; }
.blg-body a { color: var(--uh-link); text-underline-offset: 3px; }
.blg-body strong { color: var(--uh-ink); }
.blg-body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--uh-blue); color: var(--uh-ink); font-size: 19px; }
.blg-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; display: block; overflow-x: auto; }
.blg-body th, .blg-body td { border-bottom: 1px solid var(--uh-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.blg-body th { color: var(--uh-ink); font-weight: 700; background: var(--uh-alt); }
.blg-body img { max-width: 100%; height: auto; border-radius: 12px; }

.blg-cta {
    display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center;
    margin: 32px 0; padding: 24px; border-radius: 18px; background: var(--uh-ink); color: #fcfcf8;
}
.blg-cta h2 { font-family: var(--uh-display); font-size: 22px; color: #fff; margin: 0 0 6px; }
.blg-cta p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(252, 252, 248, .82); }
@media (min-width: 720px) { .blg-cta { grid-template-columns: 1fr auto; padding: 28px 32px; } }

.blg-author { display: flex; gap: 14px; align-items: center; padding: 18px 0; border-top: 1px solid var(--uh-line); }
.blg-author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; background: #eef0ea; flex: 0 0 auto; }
.blg-author p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--uh-ink-soft); }
.blg-author strong { color: var(--uh-ink); }

.blg-share { display: flex; align-items: center; gap: 8px; padding: 6px 0 40px; }
.blg-share span { font-size: 14px; font-weight: 600; color: var(--uh-ink-soft); margin-right: 4px; }
.blg-share a, .blg-share button {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid #cfd8d5; background: #fff; color: var(--uh-ink);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; text-decoration: none;
}
.blg-share a:hover, .blg-share button:hover { border-color: var(--uh-ink); }