/**
 * components.css — reusable component styles (cards, hero, sections,
 * program cards, 404, no-results, sidebar widgets).
 *
 * Single responsibility: visual components that are NOT header, nav,
 * footer, forms, or buttons.
 *
 * @package ICE_GeneratePress_Child
 * @since   1.0.0
 */

/* ======================================================================
   Hero
   ====================================================================== */

.ice-hero {
        position: relative;
        background: linear-gradient(135deg, var(--ice-primary) 0%, #2a2825 60%, #1a1a1a 100%);
        color: var(--ice-white);
        padding: var(--ice-spacing-3xl) 0;
        overflow: hidden;
        isolation: isolate;
}

.ice-hero__bg {
        position: absolute;
        inset: 0;
        background:
                radial-gradient(circle at 20% 30%, rgba(214, 181, 110, 0.18) 0%, transparent 45%),
                radial-gradient(circle at 80% 70%, rgba(214, 181, 110, 0.10) 0%, transparent 40%);
        z-index: -1;
}

.ice-hero__inner {
        position: relative;
        max-width: 920px;
}

.ice-hero__eyebrow {
        display: inline-block;
        font-size: var(--ice-fs-xs);
        font-weight: var(--ice-fw-bold);
        letter-spacing: var(--ice-ls-wider);
        text-transform: uppercase;
        color: var(--ice-accent);
        margin: 0 0 var(--ice-spacing-md);
        padding: 6px 14px;
        border: 1px solid rgba(214, 181, 110, 0.4);
        border-radius: var(--ice-btn-radius);
}

.ice-hero__title {
        font-size: clamp(var(--ice-fs-4xl), 6vw, var(--ice-fs-7xl));
        font-weight: var(--ice-fw-extrabold);
        color: var(--ice-white);
        line-height: var(--ice-lh-tight);
        letter-spacing: var(--ice-ls-tight);
        margin: 0 0 var(--ice-spacing-md);
        max-width: 18ch;
}

.ice-hero__lead {
        font-size: clamp(var(--ice-fs-md), 2.4vw, var(--ice-fs-lg));
        line-height: var(--ice-lh-relaxed);
        color: rgba(255, 255, 255, 0.82);
        margin: 0 0 var(--ice-spacing-lg);
        max-width: 60ch;
}

.ice-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-sm);
        margin-bottom: var(--ice-spacing-xl);
}

.ice-hero__stats {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--ice-spacing-sm);
        padding-top: var(--ice-spacing-lg);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        max-width: 720px;
}

.ice-hero__stats-lead {
        margin: 0;
        font-size: var(--ice-fs-md);
        color: rgba(255, 255, 255, 0.82);
}

.ice-hero__stats-lead strong {
        color: var(--ice-accent);
        font-size: var(--ice-fs-xl);
        font-weight: var(--ice-fw-extrabold);
}

.ice-hero__stats-trail {
        margin: 0;
        font-size: var(--ice-fs-sm);
        color: rgba(255, 255, 255, 0.55);
}

/* ======================================================================
   Post card
   ====================================================================== */

.ice-posts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
        gap: var(--ice-spacing-lg);
        margin-top: var(--ice-spacing-md);
}

.ice-card {
        background: var(--ice-white);
        border: 1px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform var(--ice-t-base), box-shadow var(--ice-t-base), border-color var(--ice-t-base);
}

.ice-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ice-shadow-lg);
        border-color: transparent;
}

.ice-card__media {
        display: block;
        position: relative;
        aspect-ratio: 3 / 2;
        background: var(--ice-light);
        overflow: hidden;
}

.ice-card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--ice-t-slow);
}

.ice-card:hover .ice-card__img {
        transform: scale(1.05);
}

.ice-card__placeholder {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--ice-light) 0%, var(--ice-border) 100%);
}

.ice-card__body {
        padding: var(--ice-spacing-md);
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: var(--ice-spacing-xs);
}

.ice-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-xs);
        font-size: var(--ice-fs-xs);
        color: var(--ice-gray);
        text-transform: uppercase;
        letter-spacing: var(--ice-ls-wide);
}

.ice-card__cats a {
        color: var(--ice-accent);
        font-weight: var(--ice-fw-bold);
}

.ice-card__title {
        font-size: var(--ice-fs-lg);
        font-weight: var(--ice-fw-bold);
        line-height: var(--ice-lh-snug);
        margin: 0;
}

.ice-card__title a {
        color: var(--ice-title);
        text-decoration: none;
        transition: color var(--ice-t-fast);
}

.ice-card__title a:hover {
        color: var(--ice-accent);
}

.ice-card__excerpt {
        color: var(--ice-body);
        font-size: var(--ice-fs-sm);
        line-height: var(--ice-lh-normal);
        margin: 0;
        flex: 1 1 auto;
}

.ice-card__readmore {
        display: inline-flex;
        align-items: center;
        gap: var(--ice-spacing-2xs);
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-accent);
        text-decoration: none;
        margin-top: var(--ice-spacing-2xs);
        transition: gap var(--ice-t-fast), color var(--ice-t-fast);
}

.ice-card__readmore:hover {
        color: var(--ice-accent-dark);
        gap: var(--ice-spacing-xs);
        text-decoration: none;
}

.ice-card__readmore svg {
        transition: transform var(--ice-t-fast);
}

.ice-card__readmore:hover svg {
        transform: translateX(3px);
}

/* ======================================================================
   Program card (front page Programs section)
   ====================================================================== */

.ice-programs__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        gap: var(--ice-spacing-md);
}

.ice-program-card {
        position: relative;
        background: var(--ice-white);
        border: 1px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        padding: var(--ice-spacing-lg);
        overflow: hidden;
        transition: transform var(--ice-t-base), box-shadow var(--ice-t-base), border-color var(--ice-t-base);
}

.ice-program-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--ice-accent);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--ice-t-base);
}

.ice-program-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ice-shadow-lg);
        border-color: transparent;
}

.ice-program-card:hover::before {
        transform: scaleX(1);
}

.ice-program-card__link {
        display: inline-flex;
        align-items: center;
        margin-bottom: var(--ice-spacing-sm);
}

.ice-program-card__cat {
        display: inline-block;
        padding: 4px 12px;
        background: var(--ice-light);
        color: var(--ice-accent);
        font-size: var(--ice-fs-xs);
        font-weight: var(--ice-fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--ice-ls-wide);
        border-radius: var(--ice-btn-radius);
        transition: background var(--ice-t-fast);
}

.ice-program-card:hover .ice-program-card__cat {
        background: var(--ice-accent);
        color: var(--ice-primary);
}

.ice-program-card__body {
        display: flex;
        flex-direction: column;
        gap: var(--ice-spacing-xs);
}

.ice-program-card__title {
        font-size: var(--ice-fs-lg);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-title);
        margin: 0;
}

.ice-program-card__excerpt {
        font-size: var(--ice-fs-sm);
        color: var(--ice-body);
        line-height: var(--ice-lh-normal);
        margin: 0;
}

.ice-program-card__more {
        display: inline-flex;
        align-items: center;
        gap: var(--ice-spacing-2xs);
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-accent);
        text-decoration: none;
        margin-top: var(--ice-spacing-2xs);
        transition: gap var(--ice-t-fast), color var(--ice-t-fast);
}

.ice-program-card__more:hover {
        color: var(--ice-accent-dark);
        gap: var(--ice-spacing-xs);
        text-decoration: none;
}

.ice-program-card__more svg {
        transition: transform var(--ice-t-fast);
}

.ice-program-card__more:hover svg {
        transform: translateX(3px);
}

/* ======================================================================
   About section
   ====================================================================== */

.ice-about__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ice-spacing-xl);
        align-items: center;
}

.ice-about__media {
        display: none;
}

.ice-about__media-frame {
        position: relative;
        aspect-ratio: 4 / 5;
        background: linear-gradient(135deg, var(--ice-primary) 0%, #2a2825 100%);
        border-radius: var(--ice-btn-radius-sm);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--ice-shadow-lg);
}

.ice-about__media-frame::before {
        content: "";
        position: absolute;
        top: -20px;
        right: -20px;
        bottom: 20px;
        left: 20px;
        background: var(--ice-accent);
        z-index: 0;
        border-radius: var(--ice-btn-radius-sm);
}

.ice-about__media-mark {
        position: relative;
        z-index: 1;
        font-size: clamp(var(--ice-fs-4xl), 10vw, var(--ice-fs-7xl));
        font-weight: var(--ice-fw-black);
        color: var(--ice-accent);
        letter-spacing: var(--ice-ls-tight);
}

.ice-about__title {
        font-size: clamp(var(--ice-fs-2xl), 4vw, var(--ice-fs-4xl));
        margin: 0 0 var(--ice-spacing-md);
}

.ice-about__lead {
        font-size: var(--ice-fs-md);
        color: var(--ice-title);
        font-weight: var(--ice-fw-medium);
        line-height: var(--ice-lh-relaxed);
        margin: 0 0 var(--ice-spacing-md);
}

.ice-about__text {
        font-size: var(--ice-fs-base);
        color: var(--ice-body);
        line-height: var(--ice-lh-relaxed);
        margin: 0 0 var(--ice-spacing-lg);
}

.ice-about__stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ice-spacing-md);
        list-style: none;
        margin: 0;
        padding: var(--ice-spacing-lg) 0 0;
        border-top: 1px solid var(--ice-border);
}

.ice-about__stat {
        display: flex;
        flex-direction: column;
        gap: 2px;
}

.ice-about__stat-num {
        font-family: var(--ice-font-heading);
        font-size: var(--ice-fs-3xl);
        font-weight: var(--ice-fw-extrabold);
        color: var(--ice-accent);
        line-height: 1;
}

.ice-about__stat-label {
        font-size: var(--ice-fs-sm);
        color: var(--ice-body);
}

/* ======================================================================
   CTA Band (front page bottom)
   ====================================================================== */

.ice-cta-band {
        background: linear-gradient(135deg, var(--ice-primary) 0%, #2a2825 100%);
        color: var(--ice-white);
        padding: var(--ice-spacing-3xl) 0;
        position: relative;
        overflow: hidden;
}

.ice-cta-band::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
                radial-gradient(circle at 80% 50%, rgba(214, 181, 110, 0.18) 0%, transparent 50%);
        pointer-events: none;
}

.ice-cta-band__inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ice-spacing-xl);
        flex-wrap: wrap;
}

.ice-cta-band__content {
        flex: 1 1 480px;
        min-width: 280px;
}

.ice-cta-band__title {
        font-size: clamp(var(--ice-fs-2xl), 4vw, var(--ice-fs-4xl));
        color: var(--ice-white);
        margin: 0 0 var(--ice-spacing-sm);
}

.ice-cta-band__text {
        font-size: var(--ice-fs-md);
        color: rgba(255, 255, 255, 0.78);
        margin: 0;
        max-width: 540px;
}

.ice-cta-band__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-sm);
        flex: 0 0 auto;
}

/* ======================================================================
   Page header (inner pages)
   ====================================================================== */

.ice-page-header {
        background: var(--ice-light);
        padding: var(--ice-spacing-xl) 0;
        border-bottom: 1px solid var(--ice-border);
}

.ice-page-header__title {
        font-size: clamp(var(--ice-fs-2xl), 4vw, var(--ice-fs-4xl));
        margin: var(--ice-spacing-sm) 0 0;
}

.ice-page-header__query {
        color: var(--ice-accent);
}

/* ======================================================================
   404
   ====================================================================== */

.ice-404 {
        text-align: center;
        max-width: 720px;
        margin: 0 auto;
        padding: var(--ice-spacing-2xl) 0;
}

.ice-404__title {
        font-size: clamp(var(--ice-fs-5xl), 14vw, var(--ice-fs-7xl));
        color: var(--ice-accent);
        font-weight: var(--ice-fw-black);
        line-height: 1;
        margin: 0 0 var(--ice-spacing-md);
}

.ice-404__lead {
        font-size: var(--ice-fs-md);
        color: var(--ice-body);
        margin: 0 0 var(--ice-spacing-lg);
        line-height: var(--ice-lh-relaxed);
}

.ice-404__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-sm);
        justify-content: center;
        margin-bottom: var(--ice-spacing-xl);
}

.ice-404__search {
        max-width: 480px;
        margin: 0 auto var(--ice-spacing-xl);
}

.ice-404__nav {
        text-align: left;
}

.ice-404__menu {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-sm);
        justify-content: center;
        list-style: none;
        padding: 0;
}

.ice-404__menu a {
        display: inline-block;
        padding: 6px 14px;
        background: var(--ice-light);
        border-radius: var(--ice-btn-radius-sm);
        font-size: var(--ice-fs-sm);
        color: var(--ice-title);
        font-weight: var(--ice-fw-semibold);
        transition: all var(--ice-t-fast);
}

.ice-404__menu a:hover {
        background: var(--ice-accent);
        color: var(--ice-primary);
        text-decoration: none;
}

/* ======================================================================
   No results
   ====================================================================== */

.ice-no-results {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
        padding: var(--ice-spacing-2xl) 0;
}

.ice-no-results__title {
        font-size: var(--ice-fs-3xl);
        margin: 0 0 var(--ice-spacing-sm);
}

.ice-no-results__text {
        color: var(--ice-body);
        margin: 0 0 var(--ice-spacing-lg);
}

.ice-no-results__search {
        max-width: 480px;
        margin: 0 auto var(--ice-spacing-md);
}

/* ======================================================================
   Sidebar widgets
   ====================================================================== */

.ice-sidebar {
        width: 100%;
}

.ice-widget {
        margin-bottom: var(--ice-spacing-lg);
        padding: var(--ice-spacing-md);
        background: var(--ice-content-bg); /* white card (wpbeginner-style) */
        border-radius: var(--ice-content-radius);
        border: 1px solid var(--ice-content-border);
        box-shadow: var(--ice-shadow-sm);
}

.ice-widget__title {
        font-size: var(--ice-fs-md);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-title);
        margin: 0 0 var(--ice-spacing-sm);
        padding-bottom: var(--ice-spacing-xs);
        border-bottom: 2px solid var(--ice-accent);
}

.ice-widget ul,
.ice-widget ol {
        list-style: none;
        margin: 0;
        padding: 0;
}

.ice-widget ul ul,
.ice-widget ol ul {
        padding-left: var(--ice-spacing-md);
}

.ice-widget li {
        margin-bottom: var(--ice-spacing-2xs);
}

.ice-widget a {
        color: var(--ice-title);
        text-decoration: none;
        transition: color var(--ice-t-fast);
}

.ice-widget a:hover {
        color: var(--ice-accent);
}

.ice-widget input[type="text"],
.ice-widget input[type="email"],
.ice-widget input[type="search"],
.ice-widget select {
        width: 100%;
        padding: 10px 12px;
        font-size: var(--ice-fs-sm);
        border: 2px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        background: var(--ice-white);
}

.ice-widget input:focus,
.ice-widget select:focus {
        outline: none;
        border-color: var(--ice-accent);
        box-shadow: 0 0 0 3px rgba(214, 181, 110, 0.25);
}

.ice-widget .search-form .ice-search-form__input {
        width: 100%;
}

.ice-widget .tagcloud a {
        display: inline-block;
        padding: 4px 10px;
        margin: 2px;
        background: var(--ice-white);
        border: 1px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        font-size: var(--ice-fs-xs) !important;
        color: var(--ice-title);
        text-decoration: none;
        transition: all var(--ice-t-fast);
}

.ice-widget .tagcloud a:hover {
        background: var(--ice-accent);
        color: var(--ice-primary);
        border-color: var(--ice-accent);
        text-decoration: none;
}

/* Calendar widget */
.ice-widget #calendar_wrap table {
        width: 100%;
}

.ice-widget #wp-calendar caption {
        font-weight: var(--ice-fw-bold);
        padding: var(--ice-spacing-xs);
        color: var(--ice-title);
}

.ice-widget #wp-calendar th,
.ice-widget #wp-calendar td {
        text-align: center;
        padding: 6px;
        font-size: var(--ice-fs-sm);
}

.ice-widget #wp-calendar #today {
        background: var(--ice-accent);
        color: var(--ice-primary);
        font-weight: var(--ice-fw-bold);
        border-radius: var(--ice-btn-radius-sm);
}

/* ======================================================================
   Author bio
   ====================================================================== */

.ice-author {
        margin-top: var(--ice-spacing-xl);
        padding: var(--ice-spacing-lg);
        background: var(--ice-light);
        border-radius: var(--ice-btn-radius-sm);
        border-left: 4px solid var(--ice-accent);
}

.ice-author__inner {
        display: flex;
        gap: var(--ice-spacing-md);
        align-items: flex-start;
}

.ice-author__avatar {
        flex: 0 0 auto;
}

.ice-author__avatar-img,
.ice-author__avatar img {
        border-radius: 50%;
        border: 3px solid var(--ice-white);
        box-shadow: var(--ice-shadow);
        width: 96px;
        height: 96px;
}

.ice-author__body {
        flex: 1 1 auto;
        min-width: 0;
}

.ice-author__name {
        font-family: var(--ice-font-heading);
        font-size: var(--ice-fs-lg);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-title);
        margin: 0 0 2px;
}

.ice-author__label {
        font-size: var(--ice-fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--ice-ls-wide);
        color: var(--ice-accent);
        font-weight: var(--ice-fw-bold);
        margin: 0 0 var(--ice-spacing-xs);
}

.ice-author__bio {
        font-size: var(--ice-fs-sm);
        color: var(--ice-body);
        line-height: var(--ice-lh-normal);
        margin: 0 0 var(--ice-spacing-sm);
}

.ice-author__bio p:last-child {
        margin: 0;
}

.ice-author__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-xs);
}

@media (max-width: 576px) {
        .ice-author__inner {
                flex-direction: column;
                align-items: center;
                text-align: center;
        }
        .ice-author__actions {
                justify-content: center;
        }
}

/* ======================================================================
   Share buttons
   ====================================================================== */

.ice-share {
        display: flex;
        align-items: center;
        gap: var(--ice-spacing-sm);
        flex-wrap: wrap;
        margin: var(--ice-spacing-lg) 0;
        padding: var(--ice-spacing-md) 0;
        border-top: 1px solid var(--ice-border);
        border-bottom: 1px solid var(--ice-border);
}

.ice-share__label {
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-title);
        text-transform: uppercase;
        letter-spacing: var(--ice-ls-wide);
}

.ice-share__list {
        display: flex;
        gap: var(--ice-spacing-xs);
        list-style: none;
        margin: 0;
        padding: 0;
}

.ice-share__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--ice-light);
        color: var(--ice-title);
        transition: all var(--ice-t-fast);
}

.ice-share__link:hover {
        background: var(--ice-accent);
        color: var(--ice-primary);
        transform: translateY(-2px);
        text-decoration: none;
}

.ice-share__link--facebook:hover { background: #1877f2; color: var(--ice-white); }
.ice-share__link--twitter:hover  { background: #000000; color: var(--ice-white); }
.ice-share__link--linkedin:hover { background: #0a66c2; color: var(--ice-white); }
.ice-share__link--whatsapp:hover { background: #25d366; color: var(--ice-white); }
.ice-share__link--email:hover    { background: var(--ice-primary); color: var(--ice-white); }

/* ======================================================================
   Related posts
   ====================================================================== */

.ice-related {
        margin-top: var(--ice-spacing-xl);
        padding-top: var(--ice-spacing-xl);
        border-top: 1px solid var(--ice-border);
}

.ice-related__title {
        font-size: var(--ice-fs-xl);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-title);
        margin: 0 0 var(--ice-spacing-md);
}

.ice-related__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
        gap: var(--ice-spacing-md);
}

.ice-card--related {
        background: var(--ice-white);
        border: 1px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform var(--ice-t-base), box-shadow var(--ice-t-base), border-color var(--ice-t-base);
}

.ice-card--related:hover {
        transform: translateY(-4px);
        box-shadow: var(--ice-shadow-lg);
        border-color: transparent;
}

/* ======================================================================
   Archive card (v1.1.5) — featured image background + overlay + badge
   ====================================================================== */

.ice-archive-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ice-spacing-lg);
        margin-top: var(--ice-spacing-md);
}

@media (max-width: 768px) {
        .ice-archive-grid {
                grid-template-columns: 1fr;
                gap: var(--ice-spacing-md);
        }
}

.ice-card--archive {
        background: var(--ice-content-bg);
        border: 1px solid var(--ice-content-border);
        border-radius: var(--ice-content-radius);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: transform var(--ice-t-base), box-shadow var(--ice-t-base), border-color var(--ice-t-base);
        box-shadow: var(--ice-shadow-sm);
}

.ice-card--archive:hover {
        transform: translateY(-4px);
        box-shadow: var(--ice-shadow-lg);
        border-color: transparent;
}

/* Featured image as full background */
.ice-card--archive__media {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-color: var(--ice-light);
        overflow: hidden;
}

.ice-card--archive__placeholder {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--ice-light) 0%, var(--ice-border) 100%);
}

/* Black gradient overlay (top-to-bottom, ~30% opacity at bottom) */
.ice-card--archive__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.15) 0%,
                rgba(0, 0, 0, 0.25) 50%,
                rgba(0, 0, 0, 0.65) 100%
        );
        pointer-events: none;
        transition: opacity var(--ice-t-base);
}

.ice-card--archive:hover .ice-card--archive__overlay {
        opacity: 0.85;
}

/* Category badge (gold pill, BOTTOM-left, overlapping image bottom edge) */
.ice-card--archive__category {
        position: absolute;
        bottom: var(--ice-spacing-sm);
        left: var(--ice-spacing-sm);
        display: inline-block;
        padding: 5px 12px;
        background: var(--ice-accent);
        color: var(--ice-primary);
        font-size: 11px;
        font-weight: var(--ice-fw-bold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: var(--ice-btn-radius);
        z-index: 2;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Date (white, uppercase, BOTTOM-right) */
.ice-card--archive__date {
        position: absolute;
        bottom: var(--ice-spacing-sm);
        right: var(--ice-spacing-sm);
        color: var(--ice-white);
        font-size: 11px;
        font-weight: var(--ice-fw-semibold);
        letter-spacing: 0.06em;
        z-index: 2;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Body section (white, below image) */
.ice-card--archive__body {
        padding: var(--ice-spacing-md);
        display: flex;
        flex-direction: column;
        gap: var(--ice-spacing-xs);
        flex: 1 1 auto;
}

.ice-card--archive__title {
        font-size: var(--ice-fs-lg);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-title);
        line-height: var(--ice-lh-snug);
        margin: 0;
}

.ice-card--archive__title a {
        color: var(--ice-title);
        text-decoration: none;
        transition: color var(--ice-t-fast);
}

.ice-card--archive__title a:hover {
        color: var(--ice-accent);
}

.ice-card--archive__excerpt {
        color: var(--ice-body);
        font-size: var(--ice-fs-sm);
        line-height: var(--ice-lh-normal);
        margin: 0;
        flex: 1 1 auto;
}

.ice-card--archive__readmore {
        display: inline-flex;
        align-items: center;
        gap: var(--ice-spacing-2xs);
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-accent);
        text-decoration: none;
        margin-top: var(--ice-spacing-2xs);
        transition: gap var(--ice-t-fast), color var(--ice-t-fast);
}

.ice-card--archive__readmore:hover {
        color: var(--ice-accent-dark);
        gap: var(--ice-spacing-xs);
        text-decoration: none;
}

.ice-card--archive__readmore svg {
        transition: transform var(--ice-t-fast);
}

.ice-card--archive__readmore:hover svg {
        transform: translateX(3px);
}

/* ======================================================================
   Archive filter bar (v1.1.5)
   ====================================================================== */

.ice-archive-filters {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-sm);
        align-items: flex-end;
        padding: var(--ice-spacing-md);
        background: var(--ice-content-bg);
        border: 1px solid var(--ice-content-border);
        border-radius: var(--ice-content-radius);
        margin-bottom: var(--ice-spacing-md);
        box-shadow: var(--ice-shadow-sm);
}

.ice-archive-filters__group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1 1 200px;
        min-width: 180px;
}

.ice-archive-filters__label {
        font-size: 11px;
        font-weight: var(--ice-fw-bold);
        color: var(--ice-gray);
        text-transform: uppercase;
        letter-spacing: 0.06em;
}

.ice-archive-filters__select {
        width: 100%;
        padding: 10px 12px;
        font-family: var(--ice-font-body);
        font-size: var(--ice-fs-sm);
        color: var(--ice-title);
        background: var(--ice-white);
        border: 1px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        cursor: pointer;
        transition: border-color var(--ice-t-fast), box-shadow var(--ice-t-fast);
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 32px;
}

.ice-archive-filters__select:focus {
        outline: none;
        border-color: var(--ice-accent);
        box-shadow: 0 0 0 3px rgba(214, 181, 110, 0.25);
}

/* ======================================================================
   Reading time meta
   ====================================================================== */

.ice-meta-reading-time {
        display: inline-flex;
        align-items: center;
        gap: 4px;
}

.ice-meta-reading-time svg {
        opacity: 0.7;
}

/* ======================================================================
   Post navigation (prev/next)
   ====================================================================== */

.ice-post-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ice-spacing-md);
        margin: var(--ice-spacing-lg) 0;
}

.ice-post-nav__prev,
.ice-post-nav__next {
        display: flex;
        flex-direction: column;
        padding: var(--ice-spacing-md);
        background: var(--ice-light);
        border-radius: var(--ice-btn-radius-sm);
        border: 1px solid var(--ice-border);
        transition: all var(--ice-t-fast);
}

.ice-post-nav__prev:hover,
.ice-post-nav__next:hover {
        border-color: var(--ice-accent);
        background: var(--ice-white);
        box-shadow: var(--ice-shadow);
}

.ice-post-nav__next {
        text-align: right;
}

.ice-post-nav__label {
        font-size: var(--ice-fs-xs);
        text-transform: uppercase;
        letter-spacing: var(--ice-ls-wide);
        color: var(--ice-accent);
        font-weight: var(--ice-fw-bold);
        margin-bottom: 6px;
}

.ice-post-nav__prev a,
.ice-post-nav__next a {
        color: var(--ice-title);
        font-weight: var(--ice-fw-semibold);
        font-size: var(--ice-fs-sm);
        text-decoration: none;
        line-height: var(--ice-lh-snug);
}

.ice-post-nav__prev a:hover,
.ice-post-nav__next a:hover {
        color: var(--ice-accent);
}

@media (max-width: 576px) {
        .ice-post-nav {
                grid-template-columns: 1fr;
        }
        .ice-post-nav__next {
                text-align: left;
        }
}

/* ======================================================================
   Search results header (extra styles)
   ====================================================================== */

.ice-search-count {
        font-size: var(--ice-fs-sm);
        color: var(--ice-gray);
        margin: var(--ice-spacing-xs) 0 var(--ice-spacing-md);
}

.ice-search-query {
        color: var(--ice-accent);
        font-weight: var(--ice-fw-bold);
}

/* ======================================================================
   Entry caption (figure)
   ====================================================================== */

.ice-entry-caption {
        margin: var(--ice-spacing-xs) 0 0;
        font-size: var(--ice-fs-sm);
        color: var(--ice-gray);
        text-align: center;
        font-style: italic;
}

/* ======================================================================
   Entry meta (top)
   ====================================================================== */

.ice-entry-meta--top {
        margin-bottom: var(--ice-spacing-sm);
        padding-bottom: var(--ice-spacing-sm);
        border-bottom: 1px solid var(--ice-border);
}

.ice-meta-label {
        font-size: var(--ice-fs-xs);
        color: var(--ice-gray);
        text-transform: lowercase;
        margin-right: 2px;
}

/* ======================================================================
   Edit link
   ====================================================================== */

.ice-edit-link a {
        display: inline-block;
        padding: 4px 10px;
        font-size: var(--ice-fs-xs);
        background: var(--ice-light);
        border-radius: var(--ice-btn-radius-sm);
        color: var(--ice-title);
        text-decoration: none;
        font-weight: var(--ice-fw-semibold);
        transition: all var(--ice-t-fast);
}

.ice-edit-link a:hover {
        background: var(--ice-accent);
        color: var(--ice-primary);
        text-decoration: none;
}

/* ======================================================================
   Table of Contents (TOC) — v1.2.0
   ====================================================================== */

.ice-toc {
        margin: 0 0 var(--ice-spacing-lg);
        padding: var(--ice-spacing-md);
        background: var(--ice-light);
        border: 1px solid var(--ice-border);
        border-left: 3px solid var(--ice-accent);
        border-radius: var(--ice-btn-radius-sm);
}

.ice-toc__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ice-spacing-sm);
        margin-bottom: var(--ice-spacing-sm);
}

.ice-toc__title {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--ice-font-heading);
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-title);
        text-transform: uppercase;
        letter-spacing: 0.04em;
}

.ice-toc__title svg {
        color: var(--ice-accent);
}

.ice-toc__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        color: var(--ice-gray);
        background: transparent;
        border: 0;
        cursor: pointer;
        transition: background var(--ice-t-fast), color var(--ice-t-fast);
}

.ice-toc__toggle:hover {
        background: var(--ice-white);
        color: var(--ice-accent);
}

.ice-toc__toggle[aria-expanded="false"] svg {
        transform: rotate(-90deg);
}

.ice-toc__toggle svg {
        transition: transform var(--ice-t-base);
}

.ice-toc__list {
        list-style: disc;
        margin: 0;
        padding-left: var(--ice-spacing-md);
        display: flex;
        flex-direction: column;
        gap: 2px;
        /* Use max-height for collapse animation but allow content to be
         * visible when expanded. The transition handles the slide. */
        max-height: 2000px;
        opacity: 1;
        transition: max-height var(--ice-t-base), opacity var(--ice-t-base);
        overflow: hidden;
}

.ice-toc__list.is-collapsed {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
}

.ice-toc__item {
        /* No counter — bullet points via list-style: disc on the ul. */
}

.ice-toc__item--h3 {
        padding-left: var(--ice-spacing-md);
        list-style-type: circle;
}

.ice-toc__link {
        display: block;
        padding: 4px 8px;
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-medium);
        color: var(--ice-body);
        text-decoration: none;
        border-radius: var(--ice-btn-radius-sm);
        transition: background var(--ice-t-fast), color var(--ice-t-fast);
        line-height: var(--ice-lh-snug);
}

/* No ::before counter — bullet points only (v1.2.1). */

.ice-toc__link:hover,
.ice-toc__link.is-active {
        background: var(--ice-white);
        color: var(--ice-accent);
}

/* Toggle + / − icons (v1.2.1) */
.ice-toc__toggle-icon {
        font-size: 18px;
        font-weight: var(--ice-fw-bold);
        line-height: 1;
        color: var(--ice-gray);
}

.ice-toc__toggle-icon--closed {
        display: none;
}

.ice-toc__toggle[aria-expanded="false"] .ice-toc__toggle-icon--open {
        display: none;
}

.ice-toc__toggle[aria-expanded="false"] .ice-toc__toggle-icon--closed {
        display: inline;
}

/* ======================================================================
   Inline Related Posts — v1.2.1 (Individual items, single-line)
   ====================================================================== */

.ice-inline-related-item {
        margin: var(--ice-spacing-md) 0;
        padding: 12px 16px;
        background: var(--ice-light);
        border-left: 3px solid var(--ice-accent);
        border-radius: var(--ice-btn-radius-sm);
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
}

.ice-inline-related-item__label {
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-bold);
        color: var(--ice-accent);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        flex-shrink: 0;
}

.ice-inline-related-item__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        flex: 1 1 auto;
        min-width: 0;
}

.ice-inline-related-item__link:hover {
        text-decoration: none;
}

.ice-inline-related-item__title {
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-semibold);
        color: var(--ice-title);
        line-height: var(--ice-lh-snug);
        transition: color var(--ice-t-fast);
}

.ice-inline-related-item__link:hover .ice-inline-related-item__title {
        color: var(--ice-accent);
}

.ice-inline-related-item__arrow {
        flex-shrink: 0;
        color: var(--ice-accent);
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity var(--ice-t-fast), transform var(--ice-t-fast);
}

.ice-inline-related-item__link:hover .ice-inline-related-item__arrow {
        opacity: 1;
        transform: translateX(0);
}

/* ======================================================================
   Sidebar Posts Widget — v1.2.1 (Tile + List with clock icon)
   ====================================================================== */

.ice-posts-widget {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--ice-spacing-sm);
}

/* ----- First item: Large Tile (cover image + overlay) ----- */

.ice-posts-widget__item--tile {
        border: 0;
        padding: 0;
        border-radius: var(--ice-btn-radius-sm);
        overflow: hidden;
        position: relative;
        aspect-ratio: 3 / 2;
}

.ice-posts-widget__item--tile .ice-posts-widget__link {
        position: absolute;
        inset: 0;
        display: block;
}

.ice-posts-widget__tile-media {
        position: absolute;
        inset: 0;
        overflow: hidden;
}

.ice-posts-widget__tile-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--ice-t-slow);
}

.ice-posts-widget__item--tile:hover .ice-posts-widget__tile-img {
        transform: scale(1.05);
}

.ice-posts-widget__tile-placeholder {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--ice-light) 0%, var(--ice-border) 100%);
}

.ice-posts-widget__tile-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
                to top,
                rgba(0, 0, 0, 0.8) 0%,
                rgba(0, 0, 0, 0.3) 50%,
                rgba(0, 0, 0, 0.1) 100%
        );
}

.ice-posts-widget__tile-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--ice-spacing-sm);
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 2;
}

.ice-posts-widget__tile-category {
        display: inline-block;
        align-self: flex-start;
        padding: 3px 8px;
        background: var(--ice-accent);
        color: var(--ice-primary);
        font-size: 10px;
        font-weight: var(--ice-fw-bold);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-radius: var(--ice-btn-radius);
        margin-bottom: 4px;
}

.ice-posts-widget__title--tile {
        color: var(--ice-white) !important;
        font-size: var(--ice-fs-md);
        font-weight: var(--ice-fw-bold);
        line-height: var(--ice-lh-snug);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ice-posts-widget__date--tile {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: rgba(255, 255, 255, 0.8);
        font-size: var(--ice-fs-xs);
}

.ice-posts-widget__date--tile svg {
        opacity: 0.8;
}

/* ----- Subsequent items: Small List (thumbnail + title + date) ----- */

.ice-posts-widget__item--list {
        border-bottom: 1px solid var(--ice-border);
        padding-bottom: var(--ice-spacing-sm);
}

.ice-posts-widget__item--list:last-child {
        border-bottom: 0;
        padding-bottom: 0;
}

.ice-posts-widget__item--list .ice-posts-widget__link {
        display: flex;
        align-items: flex-start;
        gap: var(--ice-spacing-sm);
        text-decoration: none;
}

.ice-posts-widget__item--list .ice-posts-widget__link:hover {
        text-decoration: none;
}

.ice-posts-widget__thumb {
        flex: 0 0 auto;
        width: 80px;
        height: 80px;
        border-radius: var(--ice-btn-radius-sm);
        overflow: hidden;
        background: var(--ice-light);
}

.ice-posts-widget__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--ice-t-slow);
}

.ice-posts-widget__item--list:hover .ice-posts-widget__thumb img {
        transform: scale(1.08);
}

.ice-posts-widget__thumb-placeholder {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--ice-light) 0%, var(--ice-border) 100%);
}

.ice-posts-widget__content {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 2px;
}

.ice-posts-widget__title {
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-semibold);
        color: var(--ice-title);
        line-height: var(--ice-lh-snug);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color var(--ice-t-fast);
}

.ice-posts-widget__item--list:hover .ice-posts-widget__title {
        color: var(--ice-accent);
}

.ice-posts-widget__date {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: var(--ice-fs-xs);
        color: var(--ice-gray);
}

.ice-posts-widget__date svg {
        opacity: 0.6;
}

/* Popular variant — fire icon before title */
.ice-posts-widget--popular .ice-posts-widget__title::before {
        content: "🔥 ";
        font-size: 10px;
}