/*
Theme Name: iExplore Custom
Theme URI: https://iexplore.com/themes/iexplore/
Template: iexplore
Version: 1.0.0

Author: Internal
Author URI: https://iexplore.com

Description: Ambient Blog and Magazine WordPress Theme.
Tags: blog, news, theme-options, custom-colors, editor-style, featured-images, custom-menu, translation-ready, grid-layout
Text Domain: ambilas

Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.0

License: Themeforest Standard
License URI: https://themeforest.net/licenses/standard
*/

.site-footer {
    padding-block-start: 30px;
    padding-block-end: 30px;
}
/* Mobile Styling (Default) */
.article-header__figure {
    aspect-ratio: 16 / 9 !important;
    grid-column: 1 / 1 !important;
    grid-row: 1 / 4 !important; /* Shorter image span */
    overflow: hidden !important;
    margin: 0 !important;
}

.article-header__figure img.article-header__image {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
}

.article-header[data-has-featured-image="true"] .article-header__content {
    /* Starts at row 2 to overlap the bottom half of the row 1-4 image */
    grid-row: 1 / 10 !important;
    grid-column: 1 / 1 !important;
    padding-block-start: var(--ambilas--space--m) !important;
    padding-inline: var(--ambilas--space--m) !important;
    z-index: 2 !important;

}
:root {
    /* H1: Stays closer to 26px on mobile, reaches 38px on desktop */
    --ambilas--font-size--4xl: clamp(26px, 1.5vw + 19px, 38px);

    /* H2: Stays closer to 24px on mobile, reaches 32px on desktop */
    --ambilas--font-size--3xl: clamp(24px, 1vw + 20px, 32px);

    /* H3: Stays closer to 18px on mobile, reaches 28px on desktop */
    --ambilas--font-size--2xl: clamp(18px, 1.2vw + 13px, 28px);

    /* H4: Stays closer to 18px on mobile, reaches 24px on desktop */
    --ambilas--font-size--xl: clamp(18px, 0.8vw + 14px, 24px);

    /* Mapping the variables to the headers */
    --ambilas--font-size--h1: var(--ambilas--font-size--4xl);
    --ambilas--font-size--h2: var(--ambilas--font-size--3xl);
    --ambilas--font-size--h3: var(--ambilas--font-size--2xl);
    --ambilas--font-size--h4: var(--ambilas--font-size--xl);

    /* Standard sizes for H5 and H6 (assuming fixed if not provided) */
    --ambilas--font-size--h5: var(--ambilas--font-size--l);
    --ambilas--font-size--h6: var(--ambilas--font-size--m);
}
/* Media query for screens 1200px and up (75em) */
@media (min-width: 75em) {
    .article-header__figure {
        aspect-ratio: 1200 / 675 !important;
        grid-row: 1 / 6 !important;
    }

    .article-header[data-has-featured-image="true"] .article-header__content {
        grid-row: 4 / 9 !important; /* Standard desktop overlap restored */
        margin-block-start: 0 !important;
        padding-block-start: var(--ambilas--space--l-xl) !important;
        padding-inline: var(--ambilas--space--l-xl) !important;
    }
    /* 1. The Grid Container */
    .has-content-sidebar .article-main {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--ambilas--space--2xl);
        /* Centers the 1280px container on the screen */
        padding-inline: max(var(--ambilas--space--site), (100% - var(--ambilas--size--container)) / 2);
    }

    /* 2. The Main Article Content */
    .has-content-sidebar .article-main > * {
        --ambilas--size--content: 100%;
        /* Occupies 8 of 12 columns (~820px wide) */
        grid-column: 1 / span 8;
        inline-size: 100%;
        max-inline-size: 100%;
    }

    /* 3. The Sidebar (Where the 336x280 ad lives) */
    .has-content-sidebar .article-main > .article-sidebar {
        /* Occupies the remaining 4 columns (~410px wide) */
        /* This easily accommodates a 336px wide ad unit */
        grid-column: 9 / span 4;
        grid-row: 1 / 9999;
        font-size: var(--ambilas--font-size--xs);
        line-height: var(--ambilas--line-height--base-small);
        margin: 0;
        max-inline-size: 100%;
    }

}