/**
 * layout.css — page-level containers and grids.
 *
 * Single responsibility: layout primitives only. No colors, no typography
 * sizing beyond what layout demands.
 *
 * @package ICE_GeneratePress_Child
 * @since   1.0.0
 */

.ice-site {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
}

.ice-site > .ice-main {
        flex: 1 0 auto;
}

.ice-container {
        width: 100%;
        max-width: var(--ice-container);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--ice-spacing-sm);
        padding-right: var(--ice-spacing-sm);
}

/* Force full width on GeneratePress containers that may inherit a smaller
 * max-width from the parent theme (default GP container is 1200px).
 * Our theme's container is 1364px (or whatever the Customizer sets).
 * This safety net guarantees the page template always uses our width. */
.site-main,
.site-content,
.content-area,
.inside-article,
.inside-grid-container,
.grid-container,
.separate-containers .site-main,
.separate-containers .inside-article,
.contained-content.separate-containers .site-main {
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
}

.ice-container--narrow {
        max-width: var(--ice-container-narrow);
}

.ice-container--page,
.ice-container--single,
.ice-container--archive,
.ice-container--search,
.ice-container--index,
.ice-container--404 {
        padding-top: var(--ice-page-pad-top);
        padding-bottom: var(--ice-page-pad-bottom);
}

/* ----- Content box (wpbeginner-style) -----
 * The article element gets a white card background, subtle border, and
 * rounded corners. The body background stays soft gray so the card
 * stands out visually. This matches the wpbeginner.com layout where
 * .site-main has background:#fff; border:1px solid #e7e7e7; border-radius:5px;
 */
.ice-article,
.ice-archive-header,
.ice-search-header,
.ice-no-results,
.ice-404 {
        background: var(--ice-content-bg);
        border: 1px solid var(--ice-content-border);
        border-radius: var(--ice-content-radius);
        padding: var(--ice-content-pad-y) var(--ice-content-pad-x);
        box-shadow: var(--ice-shadow-sm);
}

/* When the article is inside a 2-column layout (with sidebar), it should
 * NOT have horizontal margin (the sidebar grid handles spacing). */
.ice-container--single .ice-article,
.ice-container--archive .ice-archive-header,
.ice-container--index .ice-article {
        margin: 0;
}

/* Override the base .ice-article max-width so the white card fills the
 * content area properly. */
.ice-article--page,
.ice-article--single,
.ice-article--front-page {
        max-width: none;
        margin: 0;
}

.ice-content-area {
        width: 100%;
        min-width: 0; /* CRITICAL: prevents grid blowout from child overflow */
}

/* When the sidebar is active, the page becomes a 2-col grid. */
.ice-container--single,
.ice-container--archive,
.ice-container--index {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--ice-spacing-xl);
}

.ice-container--single .ice-content-area,
.ice-container--archive .ice-content-area,
.ice-container--index .ice-content-area {
        grid-column: 1 / -1;
        min-width: 0;
}

@media (min-width: 1024px) {
        .ice-container--single:has(.ice-sidebar),
        .ice-container--archive:has(.ice-sidebar),
        .ice-container--index:has(.ice-sidebar) {
                grid-template-columns: minmax(0, 1fr) 320px;
        }
        .ice-container--single:has(.ice-sidebar) .ice-content-area,
        .ice-container--archive:has(.ice-sidebar) .ice-content-area,
        .ice-container--index:has(.ice-sidebar) .ice-content-area {
                grid-column: 1 / 2;
        }
        .ice-container--single .ice-sidebar,
        .ice-container--archive .ice-sidebar,
        .ice-container--index .ice-sidebar {
                grid-column: 2 / 3;
        }
}

/* ----- Section block ----- */
.ice-section {
        padding-top: var(--ice-spacing-3xl);
        padding-bottom: var(--ice-spacing-3xl);
}

.ice-section--light {
        background: var(--ice-light);
}

.ice-section__header {
        max-width: 760px;
        margin: 0 0 var(--ice-spacing-xl);
}

.ice-section__header--row {
        max-width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--ice-spacing-md);
}

.ice-section__eyebrow {
        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-sm);
}

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

.ice-section__lead {
        font-size: var(--ice-fs-md);
        color: var(--ice-body);
        max-width: 640px;
        margin: 0;
}

/* ----- Grid utilities ----- */
.ice-grid {
        display: grid;
        gap: var(--ice-grid-gap);
}

.ice-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ice-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ice-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ----- Flex utilities ----- */
.ice-flex {
        display: flex;
}

.ice-flex--center {
        align-items: center;
        justify-content: center;
}

.ice-flex--between {
        align-items: center;
        justify-content: space-between;
}

.ice-flex--gap-sm { gap: var(--ice-spacing-sm); }
.ice-flex--gap-md { gap: var(--ice-spacing-md); }
.ice-flex--gap-lg { gap: var(--ice-spacing-lg); }

/* ----- Main element ----- */
.ice-main {
        display: block;
        outline: none;
}

/* ----- Entry article -----
 * The article card is styled above (wpbeginner-style white box).
 * No max-width here — the container handles width.
 */
.ice-article {
        margin: 0;
}

/* ----- Full-width page template (v1.0.17) -----
 * Removes the container constraint, padding, sidebar, and card styling.
 * The content fills the entire viewport width (edge-to-edge).
 */
.ice-main--fullwidth {
        display: block;
}

.ice-content-area--fullwidth {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
}

.ice-article--fullwidth {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        max-width: none;
}

.ice-entry-content--fullwidth {
        margin: 0;
        padding: 0;
        max-width: none;
}

.ice-entry-footer--fullwidth {
        margin: 0;
        padding: var(--ice-spacing-md) var(--ice-spacing-sm);
        max-width: var(--ice-container);
        margin-left: auto;
        margin-right: auto;
}

/* Elementor Full Width canvas compatibility — let Elementor manage
 * the entire content area without theme interference. */
.ice-article--fullwidth .elementor,
.ice-article--fullwidth .elementor-section,
.ice-article--fullwidth .elementor-section-boxed > .elementor-container {
        max-width: none;
        width: 100%;
}

.ice-article--page,
.ice-article--single {
        max-width: none;
}

.ice-entry-header {
        margin-bottom: var(--ice-spacing-lg);
}

.ice-entry-title {
        font-size: clamp(var(--ice-fs-3xl), 4.5vw, var(--ice-fs-5xl));
        margin: var(--ice-spacing-sm) 0;
}

.ice-entry-excerpt {
        font-size: var(--ice-fs-md);
        color: var(--ice-body);
        font-style: italic;
}

.ice-entry-thumbnail {
        margin: 0 0 var(--ice-spacing-lg);
        border-radius: var(--ice-btn-radius-sm);
        overflow: hidden;
        box-shadow: var(--ice-shadow);
}

.ice-entry-thumbnail img {
        width: 100%;
        height: auto;
        display: block;
}

.ice-entry-content {
        font-size: var(--ice-fs-base);
        line-height: var(--ice-lh-relaxed);
        color: var(--ice-body);
}

.ice-entry-content > * + * {
        margin-top: var(--ice-spacing-md);
}

.ice-entry-content h2 {
        font-size: var(--ice-fs-2xl);
        margin-top: var(--ice-spacing-lg);
}

.ice-entry-content h3 {
        font-size: var(--ice-fs-xl);
        margin-top: var(--ice-spacing-lg);
}

.ice-entry-content h4 {
        font-size: var(--ice-fs-lg);
        margin-top: var(--ice-spacing-md);
}

.ice-entry-content ul,
.ice-entry-content ol {
        margin: var(--ice-spacing-sm) 0;
        padding-left: var(--ice-spacing-lg);
}

.ice-entry-content ul { list-style: disc; }
.ice-entry-content ol { list-style: decimal; }

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

.ice-entry-content img {
        border-radius: var(--ice-btn-radius-sm);
}

.ice-entry-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-sm);
        font-size: var(--ice-fs-sm);
        color: var(--ice-gray);
        margin-bottom: var(--ice-spacing-sm);
}

.ice-entry-meta a {
        color: var(--ice-title);
}

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

.ice-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-xs);
        margin-bottom: var(--ice-spacing-lg);
}

.ice-tags a {
        display: inline-block;
        padding: 4px 12px;
        background: var(--ice-light);
        border-radius: var(--ice-btn-radius-sm);
        font-size: var(--ice-fs-xs);
        color: var(--ice-title);
        text-decoration: none;
        transition: background var(--ice-t-fast);
}

.ice-tags a:hover {
        background: var(--ice-accent);
        color: var(--ice-primary);
}

.ice-post-nav {
        display: flex;
        justify-content: space-between;
        gap: var(--ice-spacing-md);
        flex-wrap: wrap;
}

.ice-post-nav a {
        color: var(--ice-title);
        font-weight: var(--ice-fw-semibold);
}

/* ----- Breadcrumb ----- */
.ice-breadcrumb {
        font-size: var(--ice-fs-sm);
        color: var(--ice-gray);
        margin-bottom: var(--ice-spacing-sm);
}

.ice-breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-2xs);
        align-items: center;
        list-style: none;
}

.ice-breadcrumb li + li::before {
        content: "/";
        margin-right: var(--ice-spacing-2xs);
        color: var(--ice-gray-light);
}

.ice-breadcrumb a {
        color: var(--ice-gray);
}

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

.ice-breadcrumb [aria-current="page"] {
        color: var(--ice-title);
        font-weight: var(--ice-fw-semibold);
}

/* ----- Pagination ----- */
.ice-pagination {
        margin-top: var(--ice-spacing-xl);
}

.ice-pagination__list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ice-spacing-2xs);
        justify-content: center;
        list-style: none;
}

.ice-pagination__item a,
.ice-pagination__item span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 var(--ice-spacing-xs);
        border: 1px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        background: var(--ice-white);
        color: var(--ice-title);
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-semibold);
        text-decoration: none;
        transition: all var(--ice-t-fast);
}

.ice-pagination__item a:hover {
        background: var(--ice-primary);
        color: var(--ice-white);
        border-color: var(--ice-primary);
}

.ice-pagination__item .current {
        background: var(--ice-accent);
        color: var(--ice-primary);
        border-color: var(--ice-accent);
}