/* ============================================================
   RESPONSIVE — Bydleti v2 "The Atelier"
   Mobile-first polish by senior UX standards
   ============================================================ */

/* Tablet landscape & below */
@media (max-width: 1080px) {
    .article-grid--three,
    .category-grid,
    .hero-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .horizontal-card {
        grid-template-columns: 35% 1fr;
    }
}

/* Tablet portrait & below */
@media (max-width: 820px) {
    :root {
        --shell: calc(100vw - 2rem);
    }

    /* Header: hide desktop nav, show hamburger */
    .site-header__inner {
        grid-template-columns: 1fr auto;
        grid-template-areas: "branding actions";
        gap: 0;
        padding: 1.2rem 0;
    }

    .primary-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Hero: tighter, more readable */
    .hero-feature {
        min-height: 22rem;
        border-radius: 1rem;
    }

    .hero-feature__content {
        padding: 1.5rem;
    }

    .hero-feature__title {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
        max-width: none;
    }

    .hero-feature__excerpt {
        font-size: 0.92rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Secondary cards: 1-column with horizontal layout */
    .hero-secondary {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .hero-secondary__card {
        border-radius: 0.85rem;
    }

    .hero-secondary__link {
        grid-template-columns: 5rem 1fr;
        align-items: center;
    }

    .hero-secondary__thumb {
        aspect-ratio: 1;
        border-radius: 0.6rem;
        overflow: hidden;
    }

    .hero-secondary__content {
        padding: 0.75rem 1rem;
    }

    .hero-secondary__content h2 {
        font-size: 1rem;
    }

    /* Article grid: 2 columns on tablet, adapt further below */
    .article-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Category grid: 2 columns always */
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .category-card {
        min-height: 14rem;
        border-radius: 1rem;
    }

    .category-card__title {
        font-size: 1.25rem;
    }

    /* Newsletter: stack vertically */
    .newsletter-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 1.2rem;
        padding: 1.5rem;
        border-radius: 1rem;
        text-align: center;
    }

    .newsletter-form {
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0.6rem;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }

    /* Horizontal cards: stack */
    .horizontal-card {
        grid-template-columns: 1fr;
    }

    .horizontal-card__media {
        aspect-ratio: 16 / 9;
    }

    .horizontal-card__media img {
        height: 100%;
        object-fit: cover;
    }

    /* Search results: stack */
    .search-result {
        grid-template-columns: 1fr;
    }

    .search-result__media {
        aspect-ratio: 16 / 9;
    }

    /* Footer: 2-column stays */
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        padding: 2.5rem 0 2rem;
    }

    /* Section spacing: tighter */
    .section {
        padding: 2.5rem 0;
    }

    .section--topics {
        padding-top: 0.5rem;
    }

    /* Author box: stack on tablet */
    .author-box {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .author-header {
        flex-direction: column;
        text-align: center;
    }

    .search-form {
        flex-direction: column;
    }
}

/* Mobile — primary target */
@media (max-width: 640px) {
    :root {
        --shell: calc(100vw - 1.5rem);
    }

    .site-main {
        padding-bottom: 3rem;
    }

    .section {
        padding: 2rem 0;
    }

    .section-heading {
        margin-bottom: 1.25rem;
    }

    h1 {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }

    h2 {
        font-size: 1.35rem;
    }

    /* Header: compact */
    .site-header__inner {
        padding: 1rem 0;
    }

    .site-branding__title {
        font-size: 1.5rem;
    }

    .site-branding__tagline {
        font-size: 0.72rem;
        margin-top: 0.2rem;
    }

    .icon-button {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    /* Hero: mobile-optimized */
    .hero-feature {
        min-height: 20rem;
        border-radius: 0.75rem;
    }

    .hero-feature__overlay {
        background: linear-gradient(180deg, rgba(26, 26, 26, 0.05) 0%, rgba(26, 26, 26, 0.88) 100%);
    }

    .hero-feature__content {
        padding: 1.25rem;
    }

    .hero-feature__title {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
        margin-bottom: 0.5rem;
    }

    .hero-feature__excerpt {
        font-size: 0.88rem;
        margin-bottom: 0.5rem;
        -webkit-line-clamp: 2;
    }

    .hero-feature__kicker {
        font-size: 0.7rem;
        padding: 0.3rem 0.65rem;
        margin-bottom: 0.6rem;
    }

    .entry-meta {
        font-size: 0.72rem;
    }

    /* Secondary cards: compact horizontal list */
    .hero-secondary {
        gap: 0.6rem;
    }

    .hero-secondary__link {
        grid-template-columns: 4.5rem 1fr;
    }

    .hero-secondary__content {
        padding: 0.5rem 0.75rem;
    }

    .hero-secondary__content h2 {
        font-size: 0.92rem;
        line-height: 1.2;
    }

    .hero-secondary__content .kicker {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
    }

    /* Article grid: single column */
    .article-grid--three,
    .article-grid--two {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .article-card {
        border-radius: 0.85rem;
    }

    .article-card__content {
        padding: 1rem;
    }

    .article-card__title {
        font-size: 1.1rem;
        min-height: auto;
    }

    .kicker {
        font-size: 0.68rem;
        margin-bottom: 0.5rem;
    }

    /* Category grid: 2-column always on mobile */
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .category-card {
        min-height: 10rem;
        border-radius: 0.75rem;
    }

    .category-card__content {
        padding: 1rem;
    }

    .category-card__title {
        font-size: 1.1rem;
    }

    .category-card__count {
        font-size: 0.7rem;
    }

    /* Newsletter: clean stacked */
    .newsletter-banner {
        padding: 1.25rem;
        border-radius: 0.75rem;
        gap: 1rem;
    }

    .newsletter-banner h2 {
        font-size: 1.25rem;
    }

    .newsletter-form input,
    .newsletter-form button {
        min-height: 2.75rem;
        font-size: 0.9rem;
    }

    /* Horizontal / editor picks: clean stack */
    .horizontal-card {
        border-radius: 0.85rem;
    }

    .horizontal-card__content {
        padding: 1rem;
    }

    .horizontal-card__title {
        font-size: 1.05rem;
    }

    .horizontal-card__excerpt {
        font-size: 0.9rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Mobile overlay: FULL-SCREEN, not small dialog */
    .mobile-menu-overlay {
        padding: 0;
    }

    .mobile-menu-overlay__dialog {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        display: flex;
        flex-direction: column;
        padding: 1.5rem;
    }

    .mobile-menu-overlay__close {
        align-self: flex-end;
        margin-bottom: 2rem;
    }

    .mobile-menu-overlay .primary-nav__list {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin-top: 0;
        flex: 1;
        justify-content: center;
    }

    .mobile-menu-overlay .primary-nav__list a {
        font-size: 1.1rem;
        letter-spacing: 0.15em;
    }

    /* Single article: tighter */
    .single-entry__header,
    .page-entry__header,
    .archive-header {
        padding-top: 1.5rem;
    }

    .single-entry__title,
    .page-entry__title {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
    }

    .single-entry__media {
        width: 100%;
        margin: 1.25rem auto 0;
        border-radius: 0.75rem;
    }

    .single-entry__body {
        margin-top: 1.25rem;
    }

    .entry-content {
        font-size: 1rem;
    }

    .entry-content blockquote {
        font-size: 1.1rem;
        margin: 1.5rem 0;
    }

    .author-box {
        padding: 1.25rem;
        border-radius: 0.85rem;
        margin-top: 2rem;
    }

    .article-toc {
        padding: 0.85rem 1rem;
        border-radius: 0.75rem;
    }

    /* Footer: single column on phone */
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 0 1.5rem;
    }

    .site-footer__title {
        font-size: 1.4rem;
    }

    /* Pagination */
    .pagination .page-numbers,
    .pagination-nav .page-numbers {
        min-width: 2.4rem;
        min-height: 2.4rem;
        padding: 0 0.65rem;
        font-size: 0.88rem;
    }
}

/* Small phones */
@media (max-width: 380px) {
    :root {
        --shell: calc(100vw - 1.25rem);
    }

    .hero-feature {
        min-height: 18rem;
    }

    .hero-feature__title {
        font-size: 1.3rem;
    }

    .category-grid {
        gap: 0.5rem;
    }

    .category-card {
        min-height: 8.5rem;
    }

    .category-card__title {
        font-size: 0.95rem;
    }
}