/* =============================================================
   UMBC Archive — category, tag, all-stories explorer, archive loop
   Shared card styles, filter pills, hero row, subscribe strip,
   and dark mode for all of the above.

   Loaded on is_archive() || is_category() || is_tag() ||
   explorer/archive page templates.
   ============================================================= */

/* =============================================================
   Stories masthead — archive/category/tag/explorer context
   ============================================================= */
.stories-masthead {
    border-bottom: 1px solid #e8e8e8;
    margin: 0;
    padding: 2rem 0 1.5rem 0;
}

.stories-masthead-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.stories-masthead-brand {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #252525;
    text-decoration: none;
    line-height: 1.1;
    white-space: nowrap;
    flex-shrink: 0;
}

.stories-masthead-brand:hover {
    color: #007176;
}

.stories-masthead-tagline {
    font-size: 0.95rem;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
    margin-left: auto;
}

/* Subscribe inside masthead (explorer/archive pages) */
.stories-masthead-subscribe {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.stories-masthead-subscribe-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.stories-masthead-subscribe-row {
    display: flex;
    gap: 0.4rem;
}

.stories-masthead-subscribe input[type="email"] {
    padding: 0.38rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.8rem;
    width: 195px;
}

.stories-masthead-subscribe input[type="email"]:focus {
    outline: 2px solid #007176;
    border-color: #007176;
}

.stories-masthead-subscribe button {
    padding: 0.38rem 0.9rem;
    background: var(--umbc-color-gold, #fdb515);
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.stories-masthead-subscribe button:hover {
    background: var(--umbc-btn-gold-hover, #e6a510);
}

/* Context label — category/tag/archive name below masthead */
.stories-context-label {
    max-width: 1300px;
    margin: 0 auto 1.5rem;
    padding: 1.25rem 0;
}

.stories-context-label-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 0.3rem;
}

.stories-context-label-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 0.35rem;
    line-height: 1.1;
}

.stories-context-label-desc {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    max-width: 60ch;
}

/* Dark mode — masthead */
[data-theme="dark"] .stories-masthead {
    border-bottom-color: #2a2a2a;
}

[data-theme="dark"] .stories-masthead-brand {
    color: #e8e8e8;
}

[data-theme="dark"] .stories-masthead-brand:hover {
    color: #4db8bc;
}

[data-theme="dark"] .stories-masthead-tagline {
    color: #aaa;
}

[data-theme="dark"] .stories-masthead-subscribe-label {
    color: #aaa;
}

[data-theme="dark"] .stories-masthead-subscribe input[type="email"] {
    background: #1e1e1e;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"]
    .stories-masthead-subscribe
    input[type="email"]::placeholder {
    color: #666;
}

[data-theme="dark"] .stories-masthead-subscribe input[type="email"]:focus {
    border-color: #fdb515;
    outline-color: #fdb515;
}

/* Dark mode — context label */
[data-theme="dark"] .stories-context-label-eyebrow {
    color: #666;
}

[data-theme="dark"] .stories-context-label-title {
    color: #e8e8e8;
}

[data-theme="dark"] .stories-context-label-desc {
    color: #888;
}

/* Responsive — masthead */
@media (max-width: 640px) {
    .stories-masthead-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .stories-masthead-subscribe {
        align-items: flex-start;
        width: 100%;
    }

    .stories-masthead-subscribe-row {
        width: 100%;
    }

    .stories-masthead-subscribe input[type="email"] {
        flex: 1;
        width: auto;
    }
}

/* =============================================================
   Shared page wrapper + intro header
   (reuses .stories-page-intro / .stories-page-title from
   stories-home.css — these are defined there and apply here too
   since stories-home.css is loaded site-wide on story contexts)
   ============================================================= */
.stories-archive-wrap,
.stories-explorer-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    box-sizing: border-box;
}

/* Defensive overflow guard. Story cards have a min-content width
   driven by unbreakable title words and an image with intrinsic
   pixel dimensions, which forces them past the grid cell on
   narrow viewports. Force every grid item to honor the cell. */
.stories-archive-wrap,
.stories-explorer-wrap {
    overflow-x: clip;
}

.stories-explorer-nav-col,
.stories-explorer-grid-wrap,
.stories-archive-main,
.stories-archive-hero-card,
.stories-explorer-grid,
.stories-ex-card,
.stories-ex-card-img-wrap,
.stories-ex-card-body {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Long titles / URLs break instead of stretching the card. */
.stories-ex-card-title,
.stories-ex-card-title a,
.stories-hero-title,
.stories-hero-title a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Card images must never exceed the wrap, even with intrinsic
   width attributes on the <img>. (Don't override height — the
   16/9 wrap relies on height: 100% to fill the aspect-ratio box.) */
.stories-ex-card-img-wrap img,
.stories-archive-hero-card img {
    max-width: 100%;
}

/* =============================================================
   Page intro — override for archive/explorer contexts
   Aligns flush left, removes any inherited indent, and adds
   a small top margin so the title clears the header properly.
   ============================================================= */
.stories-archive-wrap .stories-page-intro,
.stories-explorer-wrap .stories-page-intro {
    margin-top: 1.5rem;
    padding-left: 0;
}

.stories-archive-wrap .stories-page-title,
.stories-explorer-wrap .stories-page-title {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
}

/* =============================================================
   Explorer two-column layout: section nav + story grid
   ============================================================= */
.stories-explorer-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    align-items: start;
}

.stories-explorer-nav-col {
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

.stories-explorer-grid-wrap {
    min-width: 0;
}

@media (max-width: 1024px) {
    .stories-explorer-layout {
        grid-template-columns: 1fr;
    }

    .stories-explorer-nav-col {
        position: static;
    }
}

/* =============================================================
   Category filter pills — all-stories explorer
   ============================================================= */
.stories-filter-nav {
    margin: 2rem 0;
}

/* "Home" pill — navigation, not a filter; subtle separator after it */
.stories-filter-pills li:first-child .stories-filter-pill {
    border-color: #007176;
    color: #007176;
}

.stories-filter-pills li:first-child .stories-filter-pill:hover {
    background: #007176;
    color: #fff;
    border-color: #007176;
}

.stories-filter-pills li:first-child::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 1.4em;
    background: #ccc;
    margin: 0 0.25rem;
    align-self: center;
}

[data-theme="dark"] .stories-filter-pills li:first-child .stories-filter-pill {
    border-color: #4db8bc;
    color: #4db8bc;
}

[data-theme="dark"]
    .stories-filter-pills
    li:first-child
    .stories-filter-pill:hover {
    background: #4db8bc;
    color: #1a1a1a;
    border-color: #4db8bc;
}

[data-theme="dark"] .stories-filter-pills li:first-child::after {
    background: #444;
}

.stories-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.stories-filter-pill {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 1rem;
    border: 1px solid #ccc;
    border-radius: 99px;
    color: #444;
    text-decoration: none;
    transition:
        background 0.15s,
        color 0.15s,
        border-color 0.15s;
    white-space: nowrap;
}

.stories-filter-pill:hover {
    background: #252525;
    color: #fff;
    border-color: #252525;
}

.stories-filter-pill.is-active {
    background: #252525;
    color: #fff;
    border-color: #252525;
}

/* =============================================================
   Archive hero row — featured card + section nav
   (category.php / tag.php)
   ============================================================= */
.stories-archive-hero-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: 2.5rem;
}

.stories-archive-hero-nav {
    padding-right: 2rem;
    position: sticky;
    top: 1.5rem;
    align-self: start;
}

.stories-archive-hero-card {
    min-width: 0;
}

/* Reuse .stories-hero grid from stories-home.css */
.stories-archive-hero-card .stories-hero {
    margin-bottom: 0;
}

.stories-archive-read-more {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #007176;
    text-decoration: none;
}

.stories-archive-read-more:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .stories-archive-hero-row {
        grid-template-columns: 1fr;
    }
    .stories-archive-hero-nav {
        position: static;
        padding-right: 0;
        margin-bottom: 1.5rem;
    }
}

/* =============================================================
   Shared card grid — explorer + category/tag archives
   ============================================================= */
.stories-explorer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 900px) {
    .stories-explorer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .stories-explorer-grid {
        grid-template-columns: 1fr;
    }
}

.stories-ex-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s;
}

.stories-ex-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
}

.stories-ex-card-img-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8e8e8;
}

.stories-ex-card-img-wrap a {
    display: block;
    height: 100%;
}

.stories-ex-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.stories-ex-card:hover .stories-ex-card-img {
    transform: scale(1.03);
}

.stories-ex-card-no-img {
    background: #efefef;
}

.stories-ex-card-body {
    padding: 0.9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.2rem;
}

.stories-ex-card-cat {
    font-size: 0.68rem;
    font-weight: 700;
    color: #007176;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-bottom: 0.15rem;
    display: inline-block;
    margin-left: 0;
}

.stories-ex-card-cat:hover {
    text-decoration: underline;
}

.stories-ex-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.25rem;
    color: #1a1a1a;
}

.stories-ex-card-title a {
    color: inherit;
    text-decoration: none;
}

.stories-ex-card-title a:hover {
    color: #007176;
}

.stories-ex-card-meta {
    font-size: 0.75rem;
    color: #888;
    margin: 0 !important;
}

.stories-explorer-empty {
    color: #666;
    font-size: 1rem;
    padding: 2rem 0;
}

/* =============================================================
   Subscribe strip — stories homepage (between hero + top stories)
   ============================================================= */
.stories-subscribe-strip {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fafafa;
    margin-bottom: 2.5rem;
    padding: 1rem 1.5rem;
}

.stories-subscribe-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stories-subscribe-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.stories-subscribe-text strong {
    font-size: 0.95rem;
    color: #252525;
}

.stories-subscribe-text span {
    font-size: 0.8rem;
    color: #c2c2c2;
}

.stories-subscribe-form {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.stories-subscribe-form input[type="email"] {
    padding: 0.45rem 0.85rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 220px;
    min-width: 160px;
}

.stories-subscribe-form input[type="email"]:focus {
    outline: 2px solid #007176;
    border-color: #007176;
}

.stories-subscribe-form button {
    padding: 0.45rem 1.1rem;
    background: var(--umbc-color-gold, #fdb515);
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.stories-subscribe-form button:hover {
    background: var(--umbc-btn-gold-hover, #e6a510);
}

@media (max-width: 640px) {
    .stories-subscribe-strip-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .stories-subscribe-form {
        width: 100%;
    }
    .stories-subscribe-form input[type="email"] {
        flex: 1;
        width: auto;
    }
}

/* =============================================================
   Explorer pagination spacing
   ============================================================= */
.stories-explorer-pagination {
    margin-top: 0.5rem;
}

/* =============================================================
   Archive main column (category/tag)
   ============================================================= */
.stories-archive-main {
    min-width: 0;
}

/* =============================================================
   Dark mode
   ============================================================= */

/* Filter pills */
[data-theme="dark"] .stories-filter-pill {
    border-color: #444;
    color: #ccc;
}

[data-theme="dark"] .stories-filter-pill:hover,
[data-theme="dark"] .stories-filter-pill.is-active {
    background: #e0e0e0;
    color: #1a1a1a;
    border-color: #e0e0e0;
}

/* Cards */
[data-theme="dark"] .stories-ex-card {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="dark"] .stories-ex-card-img-wrap {
    background: #2a2a2a;
}

[data-theme="dark"] .stories-ex-card-no-img {
    background: #252525;
}

[data-theme="dark"] .stories-ex-card-title {
    color: #e0e0e0;
}

[data-theme="dark"] .stories-ex-card-title a {
    color: #e0e0e0;
}

[data-theme="dark"] .stories-ex-card-title a:hover {
    color: #fff;
}

[data-theme="dark"] .stories-ex-card-cat {
    color: #4db8bc;
}

[data-theme="dark"] .stories-ex-card-meta {
    color: #c2c2c2;
}

/* Subscribe strip */
[data-theme="dark"] .stories-subscribe-strip {
    background: #1e1e1e;
    border-color: #333;
}

[data-theme="dark"] .stories-subscribe-text strong {
    color: #e0e0e0;
}

[data-theme="dark"] .stories-subscribe-text span {
    color: #888;
}

[data-theme="dark"] .stories-subscribe-form input[type="email"] {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

[data-theme="dark"] .stories-subscribe-form input[type="email"]::placeholder {
    color: #888;
}

[data-theme="dark"] .stories-subscribe-form input[type="email"]:focus {
    border-color: #fdb515;
    outline-color: #fdb515;
}

/* Archive read-more */
[data-theme="dark"] .stories-archive-read-more {
    color: #fdb515;
}

/* Footer link */
[data-theme="dark"] .stories-archive-footer-link {
    border-color: #333;
}

[data-theme="dark"] .stories-archive-footer-link p {
    color: #888;
}

[data-theme="dark"] .stories-archive-footer-link a {
    color: #fdb515;
}

/* Archive description heading */
[data-theme="dark"] .stories-page-intro .stories-page-tagline {
    color: #aaa;
}

/* =============================================================
   Legacy — kept for any remaining .umbc-archive-* references
   (story-archive page, search results) until those are ported.
   ============================================================= */
.umbc-archive-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #e6e7e8;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
    .umbc-archive-featured {
        grid-template-columns: 1fr;
    }
}
.umbc-archive-featured-img-link {
    display: block;
    overflow: hidden;
}
.umbc-archive-featured-img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}
.umbc-archive-featured:hover .umbc-archive-featured-img {
    transform: scale(1.03);
}
.umbc-archive-featured-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    background: #fff;
}
.umbc-archive-featured-title {
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}
.umbc-archive-featured-title a {
    color: #1a1a1a;
    text-decoration: none;
}
.umbc-archive-featured-title a:hover {
    color: #007176;
    text-decoration: underline;
}
.umbc-archive-featured-meta {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.umbc-archive-featured-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.umbc-archive-featured-link {
    font-size: 13px;
    font-weight: 700;
    color: #007176;
    text-decoration: none;
    margin-top: 0.25rem;
}
.umbc-archive-featured-link:hover {
    text-decoration: underline;
}

.umbc-archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 1024px) {
    .umbc-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .umbc-archive-grid {
        grid-template-columns: 1fr;
    }
}

.umbc-archive-card {
    border: 1px solid #e6e7e8;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.umbc-archive-card-img-link {
    display: block;
    overflow: hidden;
    height: 180px;
}
.umbc-archive-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.umbc-archive-card:hover .umbc-archive-card-img {
    transform: scale(1.03);
}
.umbc-archive-card-body {
    padding: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.umbc-archive-card-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}
.umbc-archive-card-title a {
    color: #1a1a1a;
    text-decoration: none;
}
.umbc-archive-card-title a:hover {
    color: #007176;
    text-decoration: underline;
}
.umbc-archive-card-meta {
    font-size: 12px;
    color: #666;
    margin: 0;
}

[data-theme="dark"] .umbc-archive-featured,
[data-theme="dark"] .umbc-archive-card {
    background: #1a1a1a;
    border-color: #333;
}
[data-theme="dark"] .umbc-archive-featured-body,
[data-theme="dark"] .umbc-archive-card-body {
    background: #1a1a1a;
    color: #e0e0e0;
}
[data-theme="dark"] .umbc-archive-featured-title a,
[data-theme="dark"] .umbc-archive-card-title a {
    color: #e0e0e0;
    text-decoration: underline;
    text-decoration-color: #fdb515;
    text-underline-offset: 0.18em;
}
[data-theme="dark"] .umbc-archive-featured-title a:hover,
[data-theme="dark"] .umbc-archive-card-title a:hover {
    color: #fff;
}
[data-theme="dark"] .umbc-archive-featured-meta,
[data-theme="dark"] .umbc-archive-card-meta {
    color: #b0b0b0;
}
[data-theme="dark"] .umbc-archive-featured-excerpt {
    color: #d0d0d0;
}
[data-theme="dark"] .umbc-archive-featured-link {
    color: #fdb515;
}