/**
 * Purbodix 2.0 — Mobile Responsiveness Overrides
 * Dedicated mobile-first fixes for all frontend templates.
 * Breakpoints: 480px (small phone), 768px (tablet), 1024px (desktop)
 */

/* ═══════════════════════════════════════════════════════════════════
   HERO SLIDER
   ═══════════════════════════════════════════════════════════════════ */

/* Responsive height: shrinks gracefully from 450px (desktop) to 220px (small phone) */
.hero-slider-wrap {
    height: clamp(220px, 55vw, 450px) !important;
}

/* Responsive title inside slider */
.hero-slider-title {
    font-family: var(--font-headline-en);
    font-size: clamp(16px, 4vw, 36px);
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smaller overlay padding on mobile */
.hero-slider-overlay {
    padding: clamp(12px, 4vw, 40px) clamp(12px, 4vw, 30px) !important;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* Smaller nav buttons on very small screens */
@media (max-width: 480px) {
    .hero-slider-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .hero-slider-nav {
        padding: 0 8px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME BLOCK — TOP STORIES (Horizontal Cards)
   ═══════════════════════════════════════════════════════════════════ */

/* Responsive horizontal story card image */
.story-img-wrap {
    flex: 0 0 140px;
    height: 90px;
    overflow: hidden;
    border-radius: 4px;
}

@media (max-width: 480px) {
    .story-img-wrap {
        flex: 0 0 100px;
        height: 70px;
    }
}

@media (max-width: 360px) {
    .story-img-wrap {
        flex: 0 0 80px;
        height: 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME BLOCK — THUMBNAIL CARDS (Trending / Popular)
   ═══════════════════════════════════════════════════════════════════ */

.thumb-img-wrap {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
}

@media (max-width: 360px) {
    .thumb-img-wrap {
        width: 64px;
        height: 48px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   HOME BLOCKS — GRID-LAYOUT-MAIN HELPERS
   ═══════════════════════════════════════════════════════════════════ */

/*
 * Popular-list needs col-left to span 2 columns ONLY on desktop (1024px+),
 * where grid-layout-main becomes 3 columns (2fr 1.5fr 1.5fr).
 * On tablet (2 col) or mobile (1 col) it must NOT span.
 */
.popular-content-col {
    /* Default: auto (1 col on mobile, 2 cols on tablet) */
}

@media (min-width: 1024px) {
    .popular-content-col {
        grid-column: span 2;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ARTICLE PAGE — META WRAP (author + share buttons)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .single-article__meta-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .single-article__share {
        /* Move share row to start for better UX */
        order: -1;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY PAGE HEADER
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .category-header {
        padding: var(--space-2) 0;
    }

    /* Ensure pagination touch targets are large enough */
    .pagination .btn {
        min-height: 44px;
        padding: 10px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   CATEGORY PAGE — ARTICLE CARDS
   ═══════════════════════════════════════════════════════════════════ */

/*
 * On mobile (< 768px) the category listing is single column.
 * Make the image slightly shorter to reduce vertical scroll fatigue.
 */
@media (max-width: 767px) {
    .category-page .article-card__image-wrap {
        aspect-ratio: 16 / 8;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ARTICLE BODY — CONTENT OVERFLOW SAFETY
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent wide images/tables inside article body from breaking layout */
.single-article__body img,
.single-article__body table,
.single-article__body video,
.single-article__body iframe {
    max-width: 100%;
    height: auto;
}

.single-article__body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION TITLE — MOBILE FONT SIZE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .section-header--heavy .section-title {
        font-size: 13px;
        padding: 5px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL — PREVENT HORIZONTAL OVERFLOW
   ═══════════════════════════════════════════════════════════════════ */

/* Safety net: no page should ever scroll horizontally */
body {
    overflow-x: hidden;
}

/* Ensure images are always contained */
img {
    max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME BLOCKS — TABLET (768px) IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/*
 * On tablet, grid-layout-main is 2 columns.
 * The 3rd child (sidebar) is hidden, so col-left and col-mid show side by side.
 * This is correct behaviour. No changes needed.
 *
 * On mobile, all 3 stacks but sidebar (col-right.sidebar) is hidden by grid.css,
 * so col-left and col-mid stack — also correct.
 */

/* ═══════════════════════════════════════════════════════════════════
   AD SLOTS — MOBILE SIZING
   ═══════════════════════════════════════════════════════════════════ */

/* Ensure ads don't break layout */
.promo-box img,
.promo-box iframe {
    max-width: 100%;
    height: auto;
}

/* Rendered ad content wrapping */
.ad-rendered img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT / SUBMIT PAGES — FORM RESPONSIVENESS
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .form-input,
    .form-textarea {
        font-size: 16px; /* Prevents iOS auto-zoom on focus */
    }
}