/* ==========================================================================
   Drukulotek.com - Responsive Styles (Mobile-First Breakpoints)
   480px | 768px | 1024px | 1280px
   ========================================================================== */

/* ==========================================================================
   Base (Mobile: < 480px)
   ========================================================================== */

/* Layout */
.container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

section,
.section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Grid - Stack on mobile */
.grid--2,
.grid--3,
.grid--4 {
    grid-template-columns: 1fr;
}

/* Header — handled by shopence.css nav styles */

/* Hero */
.hero {
    padding: 3rem 0 2rem;
}

.hero__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.hero__image {
    order: -1;
    max-width: 100%;
}

.hero__actions {
    flex-direction: column;
}

.hero__actions .btn {
    width: 100%;
}

/* Format Grid */
.format-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

/* Blog Grid */
.blog-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

/* Trust Badges */
.trust-badges__list {
    flex-direction: column;
    gap: var(--spacing-lg);
}

.trust-badge {
    justify-content: flex-start;
    width: 100%;
}

/* Process Steps */
.process-steps {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.process-step:not(:last-child)::after {
    display: none;
}

/* Why Us Grid */
.why-us-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

/* Footer */
.footer__top {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

.footer__bottom {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
}

/* CTA Banner */
.cta-banner {
    padding: 2rem var(--spacing-lg);
    border-radius: var(--radius-lg);
}

/* Contact Form */
.form-row {
    grid-template-columns: 1fr;
}

/* Carousel */
.keyword-pill {
    padding: .6rem 1.1rem;
    font-size: .85rem;
}

/* Modal */
.keyword-modal__content {
    width: 95%;
    max-height: 95vh;
    border-radius: var(--radius-lg);
}

.keyword-modal__header {
    padding: var(--spacing-md);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.keyword-modal__header h2 {
    font-size: 1.05rem;
}

.keyword-modal__body {
    padding: var(--spacing-lg);
}

/* Service Hero */
.service-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
}

.dimension-badge {
    margin: 0 auto;
}

.service-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
}

.service-hero__actions {
    justify-content: center;
}

/* Use Cases */
.use-cases-grid {
    grid-template-columns: 1fr;
}

/* Related Formats */
.related-formats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

/* Service Content */
.service-content__grid {
    grid-template-columns: 1fr;
}

.service-sidebar {
    position: static;
}

/* Size Comparison */
.size-comparison {
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    min-height: auto;
}

/* Specs Table - Scrollable on mobile */
.specs-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--spacing-md));
    padding: 0 var(--spacing-md);
}

.specs-table {
    min-width: 500px;
}

/* Breadcrumbs */
.breadcrumbs__list {
    font-size: 0.78rem;
}

/* FAQ */
.faq-item__question {
    font-size: 0.95rem;
    padding: var(--spacing-md) 0;
}

/* Buttons */
.btn--lg {
    padding: 0.85rem 1.75rem;
    font-size: 1rem;
}

/* Section Header */
.section-header {
    margin-bottom: var(--spacing-xl);
}

.section-header p {
    font-size: 1rem;
}


/* ==========================================================================
   Small Devices (>= 480px)
   ========================================================================== */

@media (min-width: 480px) {
    .format-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__actions {
        flex-direction: row;
    }

    .hero__actions .btn {
        width: auto;
    }

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

    .newsletter-form {
        flex-direction: row;
    }

    .paper-types {
        justify-content: center;
    }
}


/* ==========================================================================
   Tablets (>= 768px)
   ========================================================================== */

@media (min-width: 768px) {
    /* Layout */
    .container {
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    section,
    .section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

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

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

    /* Blog Grid */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Trust Badges */
    .trust-badges__list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .trust-badge {
        width: auto;
        flex: 0 0 calc(50% - var(--spacing-lg));
    }

    /* Process Steps */
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }

    .process-step:not(:last-child)::after {
        display: block;
    }

    /* Footer */
    .footer__top {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__bottom {
        flex-direction: row;
    }

    /* CTA Banner */
    .cta-banner {
        padding: 3rem;
    }

    /* Contact Form */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Format Grid */
    .format-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero */
    .hero {
        padding: 4rem 0 3rem;
    }

    /* Service Hero */
    .service-hero__inner {
        grid-template-columns: 1fr auto;
        text-align: left;
    }

    .dimension-badge {
        margin: 0;
    }

    .service-hero__subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .service-hero__actions {
        justify-content: flex-start;
    }

    /* Use Cases */
    .use-cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Service Content */
    .service-content__grid {
        grid-template-columns: 2fr 1fr;
    }

    .service-sidebar {
        position: sticky;
        top: 90px;
    }

    /* Specs Table */
    .specs-table {
        min-width: auto;
    }

    /* Size Comparison */
    .size-comparison {
        flex-wrap: nowrap;
        padding: var(--spacing-xl);
    }

    /* Modal */
    .keyword-modal__content {
        width: 90%;
    }

    .keyword-modal__header {
        padding: var(--spacing-lg);
    }

    .keyword-modal__body {
        padding: var(--spacing-xl);
    }
}


/* ==========================================================================
   Desktops (>= 1024px)
   ========================================================================== */

@media (min-width: 1024px) {
    /* Layout */
    section,
    .section {
        padding-top: var(--section-padding);
        padding-bottom: var(--section-padding);
    }

    /* Header — handled by shopence.css nav styles */

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

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Hero */
    .hero {
        padding: 5rem 0 4rem;
    }

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

    .hero__image {
        order: 0;
    }

    /* Blog Grid */
    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Trust Badges */
    .trust-badges__list {
        flex-wrap: nowrap;
    }

    .trust-badge {
        flex: 1;
    }

    /* Why Us Grid */
    .why-us-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Footer */
    .footer__top {
        grid-template-columns: 1.5fr repeat(3, 1fr);
    }

    /* Format Grid */
    .format-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Use Cases */
    .use-cases-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Related Formats */
    .related-formats {
        grid-template-columns: repeat(4, 1fr);
    }

    /* CTA Banner */
    .cta-banner {
        padding: 3.5rem;
        border-radius: var(--radius-xl);
    }

    /* Size Comparison */
    .size-comparison {
        padding: var(--spacing-2xl);
        min-height: 350px;
    }

    /* Carousel */
    .keyword-pill {
        padding: .75rem 1.5rem;
        font-size: .95rem;
    }
}


/* ==========================================================================
   Large Desktops (>= 1280px)
   ========================================================================== */

@media (min-width: 1280px) {
    /* Format Grid */
    .format-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Container */
    .container {
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }

    /* Hero */
    .hero__inner {
        gap: var(--spacing-2xl);
    }

    /* Process Steps */
    .process-steps {
        gap: var(--spacing-2xl);
    }

    /* Footer */
    .footer__top {
        gap: var(--spacing-2xl);
    }
}


/* ==========================================================================
   Hover Query (touch vs non-touch)
   ========================================================================== */

@media (hover: none) {
    .format-card:hover,
    .blog-card:hover,
    .use-case-card:hover,
    .related-format-card:hover,
    .why-us-card:hover .why-us-card__icon {
        transform: none;
        box-shadow: var(--shadow-card);
    }

    .btn-primary:hover,
    .btn-outline:hover,
    .btn-secondary:hover,
    .btn-accent:hover {
        transform: none;
    }

    .keyword-pill:hover {
        transform: none;
        box-shadow: none;
    }
}


/* ==========================================================================
   Remaining Inline-Style Responsive Overrides
   For elements that still use inline styles in PHP templates
   ========================================================================== */

@media (max-width: 480px) {
    /* Inline max-width containers that weren't converted to CSS classes */
    div[style*="max-width: 900px"],
    div[style*="max-width: 800px"],
    div[style*="max-width: 1100px"] {
        max-width: 100% !important;
    }
}


/* ==========================================================================
   High DPI / Retina
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .dimension-badge__visual {
        border-width: 1px;
    }
}


/* ==========================================================================
   Print Overrides
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .hamburger,
    .mobile-nav,
    .mobile-nav-overlay,
    .cta-banner,
    .keywords-carousel,
    .keyword-modal,
    .newsletter-form {
        display: none !important;
    }

    section,
    .section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .hero {
        padding: 1rem 0;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    body {
        font-size: 12pt;
        color: black;
        background: white;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}