/*
 * Mobile-responsive enhancements for all homepage & page modules.
 * Pure additive — only @media rules, zero desktop changes.
 * Named z-* so the auto-enqueue loader sorts it last, winning cascade ties
 * with the individual section-*.css / sections-*.css files.
 *
 * Breakpoints used:
 *   768px  — tablets / small screens  (matches base-reset-variables.css)
 *   480px  — small phones             (matches navigation-menu.css)
 */

/* ============================================================
   Tablet & Small Screens  (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ---------- Global ---------- */
    :root {
        --spacing-section-y: 3rem;
    }

    /* ---------- Hero (plain / non-slider) ---------- */
    .hero:not([data-hero]) h1 {
        font-size: 2rem;
    }

    .hero:not([data-hero]) p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    /* ---------- Shared Section Title ---------- */
    .section-title {
        margin-bottom: 2rem;
    }

    .section-title h2 {
        font-size: 1.75rem;
    }

    .section-title p {
        max-width: 100%;
        font-size: 0.95rem;
    }

    /* ---------- Services Grid (auto-fit fallback) ---------- */
    .services-grid:not(.fixed-width-layout) {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.25rem;
    }

    .service-card {
        padding: 1.5rem;
    }

    .service-card:hover {
        transform: translateY(-5px);
    }

    .service-icon {
        font-size: 2rem;
    }

    .service-icon-image {
        width: 2rem;
        height: 2rem;
    }

    /* ---------- FAQ Accordion ---------- */
    .accordion {
        max-width: 100%;
    }

    .accordion-header {
        padding: 1.125rem 1rem;
        font-size: 0.95rem;
    }

    .accordion-content.active {
        padding: 0 1rem 1.125rem;
    }

    /* ---------- Feedback ---------- */
    .feedback {
        font-size: 0.95rem;
    }

    /* ---------- Products Grid (non-fixed / non-mini) ---------- */
    .home-products-display-area-grid:not(.fixed-width-layout):not(.product-mini-grid) {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.25rem;
    }

    /* ---------- Product Card Content Padding ---------- */
    .home-product-display-area-content,
    .product-card-content,
    .product-mini-card .product-card-content,
    .product-card--compact .product-card-content {
        padding: 1rem;
    }

    /* ---------- Blog Cards ---------- */
    .blog-img {
        height: 170px;
    }

    .blog-content {
        padding: 1.125rem;
    }

    /* ---------- Corporate Profile ---------- */
    .corporate-profile-content h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    /* ---------- Footer ---------- */
    footer {
        padding: 2rem 0 1rem;
    }

    .footer-column h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }

    .copyright {
        font-size: 0.82rem;
        padding-top: 1rem;
    }

    /* ---------- Buttons ---------- */
    .btn {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }

    /* ---------- Sidebar Widgets ---------- */
    .Sidebar-component-background {
        padding: 12px;
    }

    .sidebar-widgets-style {
        margin-bottom: 14px;
    }

    /* ---------- Product Category Tree ---------- */
    .product-cat-tree-wrapper {
        padding: 10px;
        font-size: 13px;
    }

    .product-cat-tree-wrapper ul ul ul ul > li > .cat-row {
        padding-left: 3rem;
    }

    .product-cat-tree-wrapper ul ul ul ul ul > li > .cat-row {
        padding-left: 3.5rem;
    }

    /* ---------- News Sidebar ---------- */
    .left_news_ul li {
        padding: 12px;
        margin-bottom: 8px;
    }
}

/* ============================================================
   Small Phone  (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {

    /* ---------- Global ---------- */
    :root {
        --spacing-section-y: 2.5rem;
    }

    /* ---------- Hero (plain / non-slider) ---------- */
    .hero:not([data-hero]) h1 {
        font-size: 1.6rem;
    }

    .hero:not([data-hero]) p {
        font-size: 0.92rem;
        margin-bottom: 1.25rem;
    }

    /* ---------- Section Title ---------- */
    .section-title {
        margin-bottom: 1.5rem;
    }

    .section-title h2 {
        font-size: 1.4rem;
    }

    .section-title p {
        font-size: 0.88rem;
    }

    /* ---------- Services ---------- */
    .services-grid:not(.fixed-width-layout) {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 1.25rem;
    }

    .service-card:hover {
        transform: none;
    }

    /* ---------- FAQ ---------- */
    .accordion-header {
        padding: 1rem 0.875rem;
        font-size: 0.9rem;
    }

    .accordion-item {
        border-radius: 6px;
    }

    /* ---------- Blog ---------- */
    .blog-img {
        height: 150px;
    }

    .blog-content {
        padding: 1rem;
    }

    /* ---------- Product Cards ---------- */
    .home-product-display-area-content,
    .product-card-content,
    .product-mini-card .product-card-content,
    .product-card--compact .product-card-content {
        padding: 0.75rem;
    }

    .home-product-display-area-card h3,
    .product-mini-card h3,
    .product-card h3,
    .product-card--compact h3 {
        font-size: 0.92rem;
        margin-bottom: 0.35rem;
    }

    /* ---------- Corporate Profile ---------- */
    .corporate-profile-lazy-media__play {
        width: 56px;
        height: 56px;
    }

    .corporate-profile-lazy-media__play::before {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 16px solid #0f172a;
    }

    .corporate-profile-lazy-media__text {
        font-size: 0.78rem;
        padding: 0.35rem 0.7rem;
    }

    /* ---------- Footer ---------- */
    footer {
        padding: 1.5rem 0 0.75rem;
    }

    .footer-column h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .copyright {
        font-size: 0.78rem;
    }

    /* ---------- Buttons ---------- */
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }

    /* ---------- Category Tree deeper nesting ---------- */
    .product-cat-tree-wrapper ul ul ul > li > .cat-row {
        padding-left: 2rem;
    }

    .product-cat-tree-wrapper ul ul ul ul > li > .cat-row {
        padding-left: 2.5rem;
    }

    .product-cat-tree-wrapper ul ul ul ul ul > li > .cat-row {
        padding-left: 2.5rem;
    }
}