/**
 * Responsive Styles
 * Full responsive breakpoints for the Korean event rental platform (파트너렌탈).
 * Breakpoints: 1200px, 992px (tablet landscape), 768px (tablet), 480px (mobile)
 */

/* ========================================
   1200px - Large Desktop Adjustments
   ======================================== */
@media screen and (max-width: 1200px) {

    .container {
        max-width: 960px;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .hero-arrow.prev {
        left: 20px;
    }

    .hero-arrow.next {
        right: 20px;
    }
}

/* ========================================
   992px - Tablet Landscape
   ======================================== */
@media screen and (max-width: 992px) {

    .container {
        max-width: 720px;
    }

    /* --- Show hamburger, hide desktop nav menu (not the whole nav bar) --- */
    .main-nav__menu {
        display: none !important;
    }

    .main-nav__hamburger {
        display: flex !important;
    }

    /* --- Top bar adjustments --- */
    .top-bar-left {
        gap: var(--spacing-md);
        font-size: var(--font-size-xs);
    }

    /* --- Typography --- */
    h1 {
        font-size: var(--font-size-3xl);
    }

    h2 {
        font-size: var(--font-size-2xl);
    }

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

    /* --- Hero --- */
    .hero-slider {
        height: 80vh;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-arrow {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-md);
    }

    /* --- Category grid: 3 columns --- */
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* --- Product grid: 3 columns --- */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

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

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

    .portfolio-item.featured {
        grid-row: span 1;
    }

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

    /* --- Stats: 2 columns on tablet landscape --- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-number {
        font-size: 2.5rem;
    }

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

    /* --- Sidebar --- */
    .sidebar {
        width: 100%;
        margin-bottom: var(--spacing-lg);
    }
}

/* ========================================
   768px - Tablet
   ======================================== */
@media screen and (max-width: 768px) {

    .container {
        max-width: 100%;
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* --- Top bar --- */
    .top-bar {
        display: none;
    }

    /* --- Typography --- */
    h1 {
        font-size: var(--font-size-2xl);
    }

    h2 {
        font-size: var(--font-size-xl);
    }

    h3 {
        font-size: var(--font-size-lg);
    }

    .section-title {
        font-size: var(--font-size-xl);
        padding-bottom: var(--spacing-md);
    }

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

    /* --- Hero --- */
    .hero-slider {
        height: 70vh;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .hero-cta .btn {
        padding: 12px 28px;
        font-size: var(--font-size-md);
    }

    .hero-arrow {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-sm);
    }

    .hero-arrow.prev {
        left: 15px;
    }

    .hero-arrow.next {
        right: 15px;
    }

    /* --- Category grid: 2 columns --- */
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .category-card {
        padding: 20px 15px;
    }

    .category-icon {
        font-size: 48px;
    }

    .category-name {
        font-size: 1rem;
    }

    /* --- Product grid: 2 columns --- */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .product-card-img {
        height: 180px;
    }

    /* --- Features: 2 columns with less padding --- */
    .features-grid {
        gap: 15px;
    }

    .feature-card {
        padding: 30px 20px;
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* --- Quick quote form: stack vertically --- */
    .quote-form-inline {
        flex-direction: column;
    }

    .quote-form-inline .btn {
        width: 100%;
    }

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

    .quote-form-wrapper {
        padding: var(--spacing-xl);
    }

    /* --- Stats: 2 columns --- */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .stat-number {
        font-size: 2.2rem;
    }

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

    /* --- Portfolio: 2 columns --- */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

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

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

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

    /* --- Sidebar: full width --- */
    .sidebar {
        width: 100%;
        margin-bottom: var(--spacing-lg);
    }

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

    .categories-section,
    .products-section,
    .features-section,
    .quote-section,
    .portfolio-section,
    .stats-section,
    .testimonials-section {
        padding: var(--spacing-2xl) 0;
    }

    /* --- Tables: smaller text --- */
    .table th,
    .table td {
        padding: 10px 12px;
        font-size: var(--font-size-xs);
    }

    /* --- Modal --- */
    .modal-content {
        max-width: 95%;
    }

    /* --- Partners --- */
    .partners-grid {
        gap: var(--spacing-xl);
    }

    .partners-grid img {
        height: 30px;
    }
}

/* ========================================
   480px - Mobile
   ======================================== */
@media screen and (max-width: 480px) {

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

    /* --- Typography --- */
    h1 {
        font-size: var(--font-size-xl);
    }

    h2 {
        font-size: var(--font-size-lg);
    }

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

    .section-subtitle {
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-lg);
    }

    /* --- Hero --- */
    .hero-slider {
        height: 60vh;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: var(--font-size-sm);
        margin-bottom: 15px;
    }

    .hero-cta {
        flex-direction: column;
    }

    .hero-cta .btn {
        width: 100%;
        padding: 12px 24px;
    }

    .hero-arrow {
        display: none;
    }

    .hero-dots button {
        width: 10px;
        height: 10px;
    }

    .hero-dots button.active {
        width: 22px;
    }

    /* --- Everything 1 column (product-grid handled by products.css) --- */
    .category-grid,
    .features-grid,
    .portfolio-grid,
    .testimonials-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .category-grid {
        gap: 12px;
    }

    .category-card {
        flex-direction: row;
        text-align: left;
        padding: 15px 20px;
        gap: var(--spacing-md);
    }

    .category-icon {
        font-size: 36px;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* --- Product cards: full width --- */
    .product-grid {
        gap: var(--spacing-md);
    }

    .product-card-img {
        height: 200px;
    }

    .product-card-body {
        padding: 15px;
    }

    /* --- Feature cards: full width --- */
    .feature-card {
        padding: 25px 20px;
    }

    /* --- Quote form --- */
    .quote-form-wrapper {
        padding: var(--spacing-lg);
        border-radius: var(--radius-md);
    }

    /* --- Stats --- */
    .stat-item {
        padding: var(--spacing-md);
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-label {
        font-size: var(--font-size-xs);
        letter-spacing: 1px;
    }

    /* --- Footer: 1 column --- */
    .footer {
        padding: var(--spacing-2xl) 0 var(--spacing-md);
    }

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

    .footer-bottom-links {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
    }

    /* --- Grid utilities: all single column --- */
    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* --- Buttons: large buttons go full width --- */
    .btn-lg {
        width: 100%;
    }

    /* --- Reduce padding/margins globally --- */
    .section {
        padding: var(--spacing-xl) 0;
    }

    .categories-section,
    .products-section,
    .features-section,
    .quote-section,
    .portfolio-section,
    .stats-section,
    .testimonials-section {
        padding: var(--spacing-xl) 0;
    }

    /* --- Cards: full width with less padding --- */
    .card-body {
        padding: var(--spacing-md);
    }

    /* --- Floating buttons: smaller --- */
    .floating-buttons {
        right: 16px;
        bottom: 16px;
        gap: var(--spacing-xs);
    }

    .floating-btn {
        width: 44px;
        height: 44px;
        font-size: var(--font-size-md);
    }

    /* --- Tables: horizontal scroll wrapper --- */
    .table-responsive {
        margin-left: calc(-1 * var(--spacing-md));
        margin-right: calc(-1 * var(--spacing-md));
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .table th,
    .table td {
        padding: 8px 10px;
        font-size: var(--font-size-xs);
        white-space: nowrap;
    }

    /* --- Modal: full width --- */
    .modal-content {
        max-height: 95vh;
        max-width: 100%;
        border-radius: var(--radius-md);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* --- Pagination: smaller --- */
    .pagination a,
    .pagination span {
        min-width: 34px;
        height: 34px;
        font-size: var(--font-size-xs);
    }

    /* --- Breadcrumb --- */
    .breadcrumb {
        font-size: var(--font-size-xs);
    }

    /* --- Partners --- */
    .partners-grid {
        gap: var(--spacing-lg);
    }

    .partners-grid img {
        height: 24px;
    }

    /* --- CTA Section --- */
    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    /* --- Mobile nav adjustments --- */
    .mobile-nav {
        padding-top: calc(var(--header-height) + var(--spacing-lg));
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .mobile-nav a {
        font-size: var(--font-size-md);
        padding: var(--spacing-sm) 0;
    }
}

/* ========================================
   360px - Small Mobile (Extra adjustments)
   ======================================== */
@media screen and (max-width: 360px) {

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

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

    .stat-number {
        font-size: 1.8rem;
    }

    .category-icon {
        font-size: 30px;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }

    .footer-social a {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
    }
}

/* ========================================
   Print Styles
   ======================================== */
@media print {

    .top-bar,
    .main-header,
    .mobile-menu-btn,
    .mobile-nav,
    .mobile-nav-backdrop,
    .floating-buttons,
    .hero-dots,
    .hero-arrow,
    .back-to-top {
        display: none !important;
    }

    body {
        background-color: #fff;
        color: #000;
        font-size: 12pt;
    }

    .container {
        max-width: 100%;
    }

    .hero-slider {
        height: auto;
        page-break-after: always;
    }

    .card,
    .product-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}