/* ==========================================================================
   Kitchen Atlas — Responsive Stylesheet
   Mobile-first responsive breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet & Below (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Layout */
    .ka-recipe__layout {
        grid-template-columns: 1fr;
        gap: var(--ka-space-2xl);
    }

    .ka-recipe__sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--ka-space-lg);
    }

    .ka-sidebar-ad {
        grid-column: 1 / -1;
    }

    /* Archive */
    .ka-archive__layout {
        grid-template-columns: 240px 1fr;
        gap: var(--ka-space-xl);
    }

    /* Grids */
    .ka-recipe-grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Footer */
    .ka-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--ka-space-2xl);
    }

    /* Hero */
    .ka-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--ka-space-2xl);
    }

    .ka-hero__feature {
        max-width: 360px;
    }

    /* About */
    .ka-about-preview__inner {
        gap: var(--ka-space-2xl);
    }

    /* Categories */
    .ka-categories__grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--ka-space-md);
    }

    /* ---- NEW: Single Post ---- */
    .ka-single-post__layout {
        grid-template-columns: 1fr;
        gap: var(--ka-space-2xl);
    }

    /* ---- NEW: Blog Archive ---- */
    .ka-archive-blog__layout {
        grid-template-columns: 1fr;
        gap: var(--ka-space-2xl);
    }

    .ka-archive-blog__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- NEW: About Page ---- */
    .ka-about__layout {
        grid-template-columns: 1fr;
    }

    .ka-about-values__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- NEW: Contact Page ---- */
    .ka-contact__layout {
        grid-template-columns: 1fr;
    }

    .ka-contact-faq__grid {
        grid-template-columns: 1fr;
    }

    /* ---- NEW: Meal Planner ---- */
    .ka-planner-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* ---- NEW: Recipe Grids ---- */
    .ka-recipe-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }

    .ka-related-posts__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ---- NEW: Submit Guidelines ---- */
    .ka-submit-guidelines {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   Tablet Portrait & Below (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Container */
    .ka-container {
        padding-left: var(--ka-space-md);
        padding-right: var(--ka-space-md);
    }

    /* Header */
    .ka-nav {
        display: none;
    }

    .ka-header__menu-toggle {
        display: flex;
    }

    .ka-header__submit-btn span {
        display: none;
    }

    .ka-header__submit-btn {
        padding: 8px;
        border-radius: var(--ka-radius-full);
    }

    .ka-header__inner {
        gap: var(--ka-space-md);
    }

    /* Hero */
    .ka-hero {
        min-height: auto;
    }

    .ka-hero__inner {
        grid-template-columns: 1fr;
        gap: var(--ka-space-xl);
        padding-top: var(--ka-space-3xl);
        padding-bottom: calc(var(--ka-space-3xl) + 40px);
    }

    .ka-hero__feature {
        display: none;
    }

    .ka-hero__title {
        font-size: var(--ka-text-3xl);
    }

    .ka-hero__subtitle {
        font-size: var(--ka-text-base);
    }

    .ka-hero__overlay {
        background:
            linear-gradient(to top, rgba(26, 26, 26, 0.85) 0%, rgba(26, 26, 26, 0.5) 60%, rgba(26, 26, 26, 0.3) 100%);
    }

    .ka-hero__floats {
        display: none;
    }

    .ka-hero__search-btn {
        padding: 8px 18px;
    }

    .ka-hero__stats {
        gap: var(--ka-space-md);
    }

    .ka-hero__stat-number {
        font-size: var(--ka-text-xl);
    }

    /* Section */
    .ka-section {
        padding: var(--ka-space-2xl) 0;
    }

    .ka-section__title {
        font-size: var(--ka-text-2xl);
    }

    /* Grids */
    .ka-recipe-grid--3,
    .ka-recipe-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Archive */
    .ka-archive__layout {
        grid-template-columns: 1fr;
    }

    .ka-archive__sidebar {
        order: -1;
    }

    .ka-filters {
        position: static;
    }

    .ka-filters__toggle {
        display: flex;
    }

    .ka-filters__body {
        display: none;
    }

    .ka-filters__body.ka-filters__body--open {
        display: block;
    }

    .ka-archive__toolbar {
        flex-direction: column;
        gap: var(--ka-space-sm);
        align-items: flex-start;
    }

    /* About */
    .ka-about-preview__inner {
        grid-template-columns: 1fr;
        gap: var(--ka-space-xl);
    }

    .ka-about-preview__image-wrap {
        aspect-ratio: 16 / 9;
        order: -1;
    }

    .ka-about-preview__title {
        font-size: var(--ka-text-2xl);
    }

    /* Recipe Single */
    .ka-recipe__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-recipe__quick-info {
        grid-template-columns: repeat(2, 1fr);
    }

    .ka-recipe__sidebar {
        grid-template-columns: 1fr;
    }

    .ka-recipe-hero__image {
        height: 350px;
    }

    /* Recipe Card Full */
    .ka-recipe-card-full {
        padding: var(--ka-space-lg);
    }

    /* Instructions */
    .ka-instruction-list__step {
        flex-direction: column;
        gap: var(--ka-space-sm);
    }

    /* Nutrition */
    .ka-nutrition__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Newsletter */
    .ka-newsletter__fields {
        flex-direction: column;
    }

    .ka-newsletter__title {
        font-size: var(--ka-text-2xl);
    }

    /* Footer */
    .ka-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--ka-space-xl);
    }

    .ka-footer__bottom {
        flex-direction: column;
        text-align: center;
    }

    .ka-footer__legal {
        justify-content: center;
    }

    /* Logos */
    .ka-logos__grid {
        gap: var(--ka-space-xl);
    }

    /* Search page */
    .ka-search-page__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-search-page__form {
        flex-direction: column;
    }

    /* 404 */
    .ka-404__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-404__search {
        flex-direction: column;
    }

    .ka-404__actions {
        flex-direction: column;
        align-items: center;
    }

    /* Page */
    .ka-page__title {
        font-size: var(--ka-text-2xl);
    }

    /* Sticky bar for mobile recipe */
    .ka-sticky-bar {
        display: block;
    }

    /* Categories */
    .ka-categories__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .ka-category-card {
        padding: var(--ka-space-md) var(--ka-space-sm);
    }

    /* ---- NEW: Single Post ---- */
    .ka-single-post__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-single-post__hero-image-wrap {
        max-height: 350px;
    }

    .ka-post-nav {
        grid-template-columns: 1fr;
        gap: var(--ka-space-md);
    }

    .ka-post-nav__link--next {
        text-align: left;
        align-items: flex-start;
    }

    .ka-related-posts__grid {
        grid-template-columns: 1fr;
    }

    /* ---- NEW: Blog Archive ---- */
    .ka-featured-post__link {
        grid-template-columns: 1fr;
    }

    .ka-archive-blog__grid {
        grid-template-columns: 1fr;
    }

    .ka-archive-blog__tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--ka-space-md);
        scrollbar-width: none;
    }

    .ka-archive-blog__tabs::-webkit-scrollbar {
        display: none;
    }

    .ka-archive-blog__tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ka-archive-blog__author-header {
        flex-direction: column;
        text-align: center;
    }

    /* ---- NEW: About Page ---- */
    .ka-about-hero__title {
        font-size: var(--ka-text-3xl);
    }

    .ka-about-story__grid,
    .ka-about-story__grid--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .ka-about-story__image {
        order: -1;
    }

    .ka-about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .ka-about-values__grid {
        grid-template-columns: 1fr;
    }

    /* ---- NEW: Contact Page ---- */
    .ka-contact__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-contact-form__row {
        grid-template-columns: 1fr;
    }

    /* ---- NEW: Recipe Index ---- */
    .ka-alpha-bar {
        position: static;
        gap: 3px;
    }

    .ka-alpha-bar__link {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .ka-letter-group__list {
        grid-template-columns: 1fr;
    }

    /* ---- NEW: Submit Recipe ---- */
    .ka-submit-guidelines {
        grid-template-columns: 1fr;
    }

    .ka-submit-form__row,
    .ka-submit-form__row--3col {
        grid-template-columns: 1fr;
    }

    /* ---- NEW: Meal Planner ---- */
    .ka-planner-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ka-planner-toolbar {
        flex-direction: column;
        gap: var(--ka-space-sm);
        text-align: center;
    }

    /* ---- NEW: Taxonomy Pages ---- */
    .ka-taxonomy__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-taxonomy__nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ka-taxonomy__nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .ka-taxonomy__nav-chip,
    .ka-taxonomy__level-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .ka-taxonomy__level-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ka-taxonomy__level-tabs::-webkit-scrollbar {
        display: none;
    }

    .ka-toolbar {
        flex-direction: column;
        gap: var(--ka-space-sm);
        align-items: flex-start;
    }

    /* ---- NEW: Comments ---- */
    .ka-comment .children {
        margin-left: var(--ka-space-md);
        padding-left: var(--ka-space-md);
    }

    .ka-comments__header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ---- NEW: Share Buttons ---- */
    .ka-share {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ---- NEW: Author Box ---- */
    .ka-author-box__header {
        flex-direction: column;
        text-align: center;
    }

    /* ---- NEW: Inline CTA ---- */
    .ka-inline-cta__fields {
        flex-direction: column;
    }

    .ka-inline-cta__input {
        width: 100%;
    }

    /* ---- NEW: Recipe Grid Variants ---- */
    .ka-recipe-grid--3col,
    .ka-recipe-grid--2col {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Mobile (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Hero */
    .ka-hero__inner {
        padding-top: var(--ka-space-2xl);
        padding-bottom: calc(var(--ka-space-2xl) + 40px);
    }

    .ka-hero__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-hero__subtitle {
        font-size: var(--ka-text-sm);
    }

    .ka-hero__badge {
        font-size: 10px;
        padding: 4px 12px;
    }

    .ka-hero__search-wrap {
        flex-wrap: wrap;
        border-radius: var(--ka-radius-lg);
        padding: 6px;
    }

    .ka-hero__search-icon {
        display: none;
    }

    .ka-hero__search-input {
        width: 100%;
        padding: 8px 12px;
    }

    .ka-hero__search-btn {
        width: 100%;
        text-align: center;
    }

    .ka-hero__actions {
        flex-direction: column;
    }

    .ka-hero__actions .ka-btn {
        width: 100%;
        justify-content: center;
    }

    .ka-hero__stats {
        justify-content: space-between;
    }

    .ka-hero__stat-number {
        font-size: var(--ka-text-lg);
    }

    /* Grids */
    .ka-recipe-grid--3,
    .ka-recipe-grid--4 {
        grid-template-columns: 1fr;
    }

    /* Recipe card */
    .ka-recipe-card__content {
        padding: var(--ka-space-md);
    }

    .ka-recipe-card__title {
        font-size: var(--ka-text-base);
    }

    /* Categories */
    .ka-categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ka-category-card__icon {
        width: 32px;
        height: 32px;
    }

    /* Quick info */
    .ka-recipe__quick-info {
        grid-template-columns: 1fr 1fr;
        gap: var(--ka-space-sm);
    }

    .ka-recipe__info-item {
        padding: var(--ka-space-sm);
    }

    /* Actions */
    .ka-recipe__actions {
        flex-direction: column;
    }

    .ka-recipe__actions .ka-btn {
        width: 100%;
    }

    /* Nutrition */
    .ka-nutrition__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Related */
    .ka-related-recipes .ka-recipe-grid {
        grid-template-columns: 1fr;
    }

    /* Newsletter */
    .ka-newsletter {
        padding: var(--ka-space-2xl) 0;
    }

    /* Section header */
    .ka-section__header {
        flex-direction: column;
        gap: var(--ka-space-sm);
    }

    /* Pagination */
    .ka-pagination__list {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Logos */
    .ka-logos__grid {
        flex-direction: column;
        gap: var(--ka-space-lg);
    }

    /* 404 popular recipes */
    .ka-404__popular .ka-recipe-grid {
        grid-template-columns: 1fr;
    }

    /* Recipe title on single */
    .ka-recipe__title {
        font-size: var(--ka-text-xl);
    }

    /* Footer newsletter */
    .ka-footer__newsletter {
        flex-direction: column;
    }

    /* Header */
    .ka-header__site-name {
        font-size: var(--ka-text-base);
    }

    .ka-header__tagline {
        display: none;
    }

    /* Recipe meta */
    .ka-recipe__meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ka-space-sm);
    }

    /* Mobile menu width */
    .ka-mobile-menu__panel {
        width: 280px;
    }

    /* ---- NEW: About Page ---- */
    .ka-about-hero__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-about-hero {
        padding: var(--ka-space-2xl) 0;
    }

    .ka-about-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--ka-space-md);
        padding: var(--ka-space-lg);
    }

    .ka-about-stat__number {
        font-size: var(--ka-text-xl);
    }

    .ka-about-team__grid {
        grid-template-columns: 1fr 1fr;
    }

    /* ---- NEW: Contact Page ---- */
    .ka-contact {
        padding: var(--ka-space-2xl) 0;
    }

    .ka-contact-form {
        padding: var(--ka-space-lg);
    }

    .ka-contact-card {
        padding: var(--ka-space-md);
    }

    /* ---- NEW: Recipe Index ---- */
    .ka-recipe-index__title,
    .ka-submit-recipe__title,
    .ka-meal-planner__title,
    .ka-archive-blog__title {
        font-size: var(--ka-text-2xl);
    }

    .ka-alpha-bar__link {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }

    /* ---- NEW: Submit Recipe ---- */
    .ka-submit-recipe {
        padding: var(--ka-space-2xl) 0;
    }

    .ka-submit-form {
        padding: var(--ka-space-lg);
    }

    .ka-submit-form__upload {
        padding: var(--ka-space-lg);
    }

    /* ---- NEW: Meal Planner ---- */
    .ka-planner-grid {
        grid-template-columns: 1fr;
    }

    .ka-planner-day {
        min-height: auto;
    }

    .ka-planner-toolbar__actions {
        flex-direction: column;
        width: 100%;
    }

    .ka-planner-toolbar__actions .ka-btn {
        width: 100%;
        justify-content: center;
    }

    .ka-meal-planner {
        padding: var(--ka-space-2xl) 0;
    }

    /* ---- NEW: Single Post ---- */
    .ka-single-post__title {
        font-size: var(--ka-text-xl);
    }

    .ka-single-post__excerpt {
        font-size: var(--ka-text-base);
    }

    .ka-single-post__hero-image-wrap {
        max-height: 250px;
    }

    .ka-single-post__meta {
        flex-direction: column;
        gap: var(--ka-space-sm);
        align-items: flex-start;
    }

    /* ---- NEW: Comments ---- */
    .ka-comments__title {
        font-size: var(--ka-text-xl);
    }

    .ka-comment .children {
        margin-left: var(--ka-space-sm);
        padding-left: var(--ka-space-sm);
    }

    .ka-comment-form {
        padding: var(--ka-space-md);
    }

    /* ---- NEW: Share Buttons (smaller) ---- */
    .ka-share__btn {
        width: 32px;
        height: 32px;
    }

    /* ---- NEW: Post Card ---- */
    .ka-post-card__content {
        padding: var(--ka-space-md);
    }

    .ka-post-card__title {
        font-size: var(--ka-text-base);
    }

    /* ---- NEW: Taxonomy ---- */
    .ka-taxonomy__hero {
        padding: var(--ka-space-2xl) 0;
    }

    .ka-taxonomy__title {
        font-size: var(--ka-text-xl);
    }

    .ka-taxonomy__stats {
        flex-direction: column;
        gap: var(--ka-space-sm);
    }

    .ka-taxonomy__subcategories-grid {
        justify-content: flex-start;
    }

    /* ---- NEW: Featured Post ---- */
    .ka-featured-post__content {
        padding: var(--ka-space-md);
    }

    .ka-featured-post__title {
        font-size: var(--ka-text-lg);
    }

    /* ---- NEW: Author Box ---- */
    .ka-author-box {
        padding: var(--ka-space-md);
    }

    .ka-author-box__avatar-img {
        width: 64px;
        height: 64px;
    }

    /* ---- NEW: Live Search ---- */
    .ka-live-search-results {
        max-height: 300px;
    }

    /* ---- NEW: Bookmark ---- */
    .ka-bookmark-btn {
        width: 32px;
        height: 32px;
    }

    /* ---- NEW: Badge ---- */
    .ka-difficulty-badge {
        font-size: 9px;
        padding: 2px 8px;
    }
}

/* --------------------------------------------------------------------------
   Large Screens (min-width: 1400px)
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    :root {
        --ka-container: 1360px;
    }

    .ka-hero {
        min-height: 700px;
    }

    .ka-hero__title {
        font-size: 4rem;
    }

    .ka-hero__inner {
        grid-template-columns: 1fr 420px;
    }
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ka-recipe-card:hover {
        transform: none;
    }

    .ka-category-card:hover {
        transform: none;
    }

    .ka-btn:hover {
        transform: none;
    }

    .ka-post-card:hover {
        transform: none;
    }

    .ka-about-value:hover {
        transform: none;
    }

    .ka-bookmark-btn:hover {
        transform: none;
    }

    .ka-featured-post__link:hover .ka-featured-post__image {
        transform: none;
    }

    .ka-post-card:hover .ka-post-card__image {
        transform: none;
    }

    .ka-recipe-card__link:hover .ka-recipe-card__overlay {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   Focus Visible Styles
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--ka-olive);
    outline-offset: 2px;
    border-radius: var(--ka-radius-sm);
}

.ka-btn:focus-visible {
    outline: 2px solid var(--ka-olive);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   High Contrast Adjustments
   -------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
    :root {
        --ka-border: #999;
        --ka-text-muted: #555;
        --ka-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .ka-recipe-card {
        border: 2px solid var(--ka-border);
    }

    .ka-btn--primary {
        border: 2px solid var(--ka-black);
    }

    .ka-post-card {
        border: 2px solid var(--ka-border);
    }

    .ka-contact-card {
        border: 2px solid var(--ka-border);
    }

    .ka-comment-form {
        border: 2px solid var(--ka-border);
    }

    .ka-author-box {
        border: 2px solid var(--ka-border);
    }

    .ka-submit-form {
        border: 2px solid var(--ka-border);
    }

    .ka-alpha-bar {
        border: 2px solid var(--ka-border);
    }

    .ka-planner-day {
        border: 2px solid var(--ka-border);
    }

    .ka-share__btn {
        border: 2px solid var(--ka-border);
    }
}