/**
 * ===========================================================================
 * RESPONSIVE DESIGN SYSTEM (GOLDEN RULE — WITH SCALING INTENT)
 * ===========================================================================
 *
 * WHY (Intent)
 * - Desktop (1440px) is the primary design reference
 * - Figma designs may exist ONLY for desktop initially
 * - UI must remain readable and balanced on all devices
 * - Responsive behavior must be predictable, not improvised
 *
 * Responsive design exists to PRESERVE INTENT, not exact sizes.
 *
 *
 * HOW (Strategy & Governance)
 *
 * 1. PRIMARY DESIGN REFERENCE (LOCKED)
 *    - 1440px is the ONLY authoritative design reference
 *    - All sizes (font, spacing, layout) are evaluated here first
 *
 *    Example:
 *    - Desktop heading = 74px
 *    - Desktop spacing = 6rem
 *
 *
 * 2. RESPONSIVE SCALING PHILOSOPHY
 *    - Desktop values define INTENT
 *    - Other devices receive DERIVED values
 *
 *    Derived values must:
 *    - preserve hierarchy
 *    - preserve readability
 *    - avoid visual dominance or crowding
 *
 *    Pixel-perfect matching on non-desktop devices is NOT required.
 *
 *
 * 3. AUTO-SCALING PERMISSION (IMPORTANT)
 *    When Figma designs for tablet/mobile are NOT available:
 *
 *    - Developer/Agent MAY derive responsive values using media queries
 *    - BUT ONLY for:
 *      • font-size
 *      • vertical spacing
 *
 *    - Structural changes are NOT allowed
 *
 *
 * 4. SCALING RULE OF THUMB (INDUSTRY PRACTICE)
 *    - Tablet (≤768px):
 *      • Reduce large text by ~25–30%
 *      • Reduce section spacing by ~30–40%
 *
 *    - Mobile (<576px):
 *      • Reduce large text by ~40–50%
 *      • Reduce section spacing by ~50%
 *
 *    These are GUIDELINES, not strict math.
 *
 *
 * 5. CONFIRMATION RULE (SAFETY VALVE)
 *    - If a responsive adjustment affects:
 *      • visual hierarchy
 *      • brand prominence
 *      • key headings (hero / page title)
 *
 *    → Developer MUST confirm before implementation.
 *
 *
 * WHAT (Implementation Rules)
 *
 * - Desktop values live in style.css
 * - Responsive reductions live ONLY in media.css
 *
 * - media.css MAY:
 *   • reduce font-size
 *   • reduce padding / margin
 *   • hide non-critical elements
 *
 * - media.css MUST NOT:
 *   • increase sizes beyond desktop
 *   • redefine layout structure
 *   • change grid logic
 *
 * - Units:
 *   • rem preferred (allows natural scaling)
 *   • px allowed ONLY when matching Figma exactly on desktop
 *
 *
 * DESIGN REVIEW REFERENCES
 * - Desktop review at 1440px
 * - Tablet sanity check at 768px
 * - Mobile sanity check at 402px
 *
 *
 * GOLDEN RULE (DO NOT BREAK)
 * - Desktop defines intent.
 * - Other devices adapt the intent.
 * - media.css refines, never re-designs.
 * - When in doubt, ASK before scaling.
 * ===========================================================================
 */

/* tablet size */
@media (max-width: 1024px) {
    :root {
        --container-padding-x: var(--container-padding-x-tablet);
        --container-padding-x-md: var(--container-padding-x-tablet);
        --container-padding-x-sm: var(--container-padding-x-tablet);
        --header-padding-x: var(--container-padding-x-tablet);
        --container-padding-y-sm: var(--container-padding-y-tablet);
    }

    .hero-grid {
        gap: var(--space-xl);
        min-height: 0;
    }

    .hero-aside {
        min-height: 380px;
    }

    .hero-title {
        font-size: var(--font-size-2xl);
    }

    .home-menu-panel {
        gap: var(--space-xl);
        padding: var(--space-xl) var(--space-2xl);
    }

    .home-why {
        gap: var(--space-xl);
        padding: var(--space-lg) var(--space-2xl);
    }

    .home-cta {
        gap: var(--space-lg);
        padding: var(--space-lg) var(--space-xl);
    }

    .customize-hero {
        gap: var(--space-xl);
        margin-bottom: -36px;
    }

    .customize-hero-art {
        width: min(240px, 30vw);
    }

    .customize-card,
    .customize-thali {
        padding: 24px 28px;
    }

    .customize-trust {
        flex-wrap: wrap;
        gap: 14px;
    }

    .customize-trust-list {
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .address-layout {
        gap: var(--space-xl);
    }
}

/* mobile size */
@media (max-width: 768px) {
    :root {
        --container-padding-x: var(--container-padding-x-mobile);
        --container-padding-x-md: var(--container-padding-x-mobile);
        --container-padding-x-sm: var(--container-padding-x-mobile);
        --header-padding-x: var(--header-padding-x-mobile);
        --header-padding-y: var(--header-padding-y-mobile);
        --container-padding-y-sm: var(--container-padding-y-md-mobile);
    }

    .desktop-height {
        height: auto;
    }

    .desktop-show {
        display: none;
    }

    .mobile-show {
        display: block;
    }

    .mobile-hide {
        display: none;
    }

    .brand-logo-tagline {
        display: none;
    }

    .brand-logo-name {
        font-size: var(--font-size-lg);
    }

    .btn-header {
        padding: 8px 12px;
        font-size: var(--font-size-xs);
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .hero-content {
        max-width: none;
        min-height: 320px;
        justify-content: flex-end;
        padding: var(--space-xl) 0 var(--space-sm);
        overflow: hidden;
    }

    .hero-content > *:not(.hero-banner-mobile) {
        position: relative;
        z-index: 1;
    }

    .hero-banner-mobile {
        opacity: 0.22;
        object-position: center right;
    }

    .hero-title {
        font-size: var(--font-size-xl);
        margin-top: var(--space-md);
    }

    .hero-cta {
        margin-top: var(--space-lg);
        width: 100%;
        justify-content: center;
    }

    .hero-features {
        gap: var(--space-md);
        margin-top: var(--space-lg);
    }

    .hero-aside {
        min-height: 0;
        padding-bottom: 0;
    }

    .hero-kitchen {
        max-width: none;
        padding: 14px 14px 12px;
    }

    .hero-kitchen-count,
    .hero-kitchen-remain-count {
        font-size: var(--font-size-lg);
    }

    .home-menu-panel {
        flex-direction: column;
        gap: var(--space-lg);
        padding: var(--space-lg);
        border-radius: 20px;
    }

    .home-menu-panel-info {
        flex: 0 0 auto;
        max-width: none;
    }

    .home-menu-panel-note {
        padding-top: var(--space-md);
    }

    .home-why {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-lg);
        padding: var(--space-lg);
        border-radius: 20px;
    }

    .home-why-heading {
        flex: 0 0 auto;
        max-width: none;
    }

    .home-why-list {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--space-md);
    }

    .home-why-item {
        flex: 1 1 calc(50% - var(--space-md));
        min-width: 140px;
    }

    .home-cta {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-lg);
        border-radius: 20px;
    }

    .home-cta-art {
        width: 72px;
        grid-column: 1;
        grid-row: 1;
    }

    .home-cta-copy {
        grid-column: 2;
        grid-row: 1;
    }

    .home-cta-title {
        font-size: var(--font-size-md);
    }

    .home-cta-action {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        align-items: stretch;
    }

    .home-cta-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    /* ---- App pages ---- */
    .page-header-title,
    .orders-history-title,
    .saved-addresses-title,
    .profile-title,
    .address-form-title {
        font-size: var(--font-size-xl);
    }

    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-row > * {
        flex: 1 1 100%;
    }

    .customize-hero {
        margin-bottom: var(--space-md);
    }

    .customize-hero-copy {
        max-width: none;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: var(--space-lg) 0 var(--space-sm);
        overflow: hidden;
    }

    .customize-hero-copy > *:not(.customize-hero-art-mobile) {
        position: relative;
        z-index: 1;
    }

    .customize-hero-art-mobile {
        opacity: 0.22;
        object-position: center right;
    }

    .customize-hero-title {
        font-size: var(--font-size-lg);
    }

    .customize-card,
    .customize-thali {
        padding: var(--space-lg);
        border-radius: 20px;
    }

    .customize-thali-head {
        flex-wrap: wrap;
    }

    .order-roti-btn {
        width: 26px;
        height: 26px;
    }

    .customize-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px;
        margin-top: var(--space-lg);
    }

    .customize-actions-back,
    .customize-actions-next {
        width: 100%;
        justify-content: center;
    }

    .customize-trust {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px 16px;
    }

    .customize-trust-list {
        flex-wrap: wrap;
        gap: 10px 14px;
        width: 100%;
    }

    .customize-trust-item {
        flex: 1 1 calc(50% - 14px);
        min-width: 0;
        white-space: normal;
        line-height: 1.3;
    }

    .order-item {
        gap: 12px;
        padding: 14px 0;
    }

    .address-layout {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .address-layout-main {
        max-width: none;
    }

    .address-layout-aside {
        position: static;
    }

    .address-header-title {
        font-size: var(--font-size-lg);
    }

    .address-form-grid {
        grid-template-columns: 1fr;
    }

    .address-form-panel {
        padding: 18px 16px 16px;
    }

    .address-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .address-actions-continue,
    .address-actions-back {
        width: 100%;
        justify-content: center;
    }

    .address-card {
        flex-wrap: wrap;
    }

    .address-card-edit {
        margin-left: auto;
    }

    .order-summary {
        padding: 18px 16px;
    }

    .orders-history-row {
        gap: 12px;
        padding: 14px;
    }

    .order-done-actions {
        flex-direction: column;
    }

    .order-done-actions .customize-actions-next,
    .order-done-actions .customize-actions-back {
        width: 100%;
        justify-content: center;
    }

    .orders-history-thumb {
        width: 52px;
        height: 52px;
    }

    .orders-history-arrow {
        display: none;
    }

    .saved-addresses-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
    }

    .saved-addresses-add {
        align-self: flex-start;
    }

    .saved-address-card {
        gap: 12px;
        padding: 14px;
    }

    .profile-card {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-edit-btn {
        align-self: flex-start;
    }

    .auth-shell {
        max-width: none;
    }

    .auth-title {
        font-size: var(--font-size-xl);
    }

    .auth-panel {
        padding: 18px 16px 16px;
    }

    .coupon-redeem-title {
        font-size: var(--font-size-xl);
    }

    .coupon-redeem-card {
        padding: 18px 16px 16px;
    }

    .coupon-redeem-offer {
        font-size: var(--font-size-xl);
    }

    .panel-card {
        padding: 18px 16px;
    }

    .order-actions .panel-btn,
    .panel-btn-block {
        width: 100%;
        justify-content: center;
    }

    .toast-wrap {
        top: 12px;
        right: 16px;
        left: 16px;
        max-width: none;
    }
}

/* small mobile */
@media (max-width: 480px) {
    .header-actions {
        gap: var(--space-sm);
    }

    .hero-title {
        font-size: var(--font-size-lg);
    }

    .hero-subtitle p {
        font-size: var(--font-size-sm);
    }

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

    .hero-content {
        min-height: 280px;
    }

    .hero-kitchen-row {
        gap: 8px;
    }

    .hero-kitchen-icon {
        width: 40px;
        height: 40px;
    }

    .hero-kitchen-label {
        font-size: var(--font-size-xs);
    }

    .hero-kitchen-count,
    .hero-kitchen-remain-count {
        font-size: var(--font-size-md);
    }

    .hero-kitchen-hint {
        font-size: 11px;
    }

    .home-why-item {
        flex: 1 1 100%;
        min-width: 0;
    }

    .home-cta-art {
        width: 64px;
    }

    .customize-hero-copy {
        min-height: 160px;
    }

    .customize-hero-title {
        font-size: var(--font-size-md);
    }

    .customize-hero-eyebrow {
        font-size: var(--font-size-md);
    }

    .customize-trust-list {
        flex-direction: column;
        gap: 10px;
    }

    .customize-trust-item {
        flex: 1 1 auto;
        width: 100%;
    }

    .order-item-img {
        width: 48px;
        height: 40px;
    }

    .orders-history-row {
        flex-wrap: wrap;
    }

    .orders-history-info {
        flex: 1 1 calc(100% - 70px);
    }

    .orders-history-aside {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        padding-left: 64px;
    }

    .page-header-title,
    .orders-history-title,
    .saved-addresses-title,
    .profile-title,
    .address-form-title,
    .auth-title {
        font-size: var(--font-size-lg);
    }
}