/**
 * Kitagrada Theme - Responsive Styles
 * Material Design breakpoints
 */

/* Material Design Breakpoints */
:root {
    --breakpoint-xs: 0px;
    --breakpoint-sm: 600px;
    --breakpoint-md: 960px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1920px;
}

/* ========== MOBILE FIRST BASE ========== */

/* Small devices (portrait phones, less than 600px) */
@media (max-width: 599px) {
    :root {
        --md-spacing-md: 12px;
        --md-spacing-lg: 16px;
    }

    .twt-container {
        padding: 0 var(--md-spacing-sm);
    }

    /* Typography adjustments */
    .twt-theme-kitagrada h1 { font-size: 48px; }
    .twt-theme-kitagrada h2 { font-size: 40px; }
    .twt-theme-kitagrada h3 { font-size: 32px; }
    .twt-theme-kitagrada h4 { font-size: 24px; }

    /* Hide on mobile */
    .hide-xs { display: none !important; }
}

/* Medium devices (tablets, 600px and up) */
@media (min-width: 600px) and (max-width: 959px) {
    /* Hide on tablet */
    .hide-sm { display: none !important; }
}

/* Large devices (desktops, 960px and up) */
@media (min-width: 960px) and (max-width: 1279px) {
    /* Hide on desktop */
    .hide-md { display: none !important; }
}

/* Extra large devices (large desktops, 1280px and up) */
@media (min-width: 1280px) {
    /* Hide on large desktop */
    .hide-lg { display: none !important; }
}

/* ========== DISPLAY UTILITIES ========== */
.show-xs { display: none !important; }
.show-sm { display: none !important; }
.show-md { display: none !important; }
.show-lg { display: none !important; }

@media (max-width: 599px) {
    .show-xs { display: block !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .show-sm { display: block !important; }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .show-md { display: block !important; }
}

@media (min-width: 1280px) {
    .show-lg { display: block !important; }
}

/* ========== GRID RESPONSIVE ========== */
@media (max-width: 599px) {
    .md-grid-cols-xs-1 { grid-template-columns: repeat(1, 1fr); }
    .md-grid-cols-xs-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 600px) and (max-width: 959px) {
    .md-grid-cols-sm-2 { grid-template-columns: repeat(2, 1fr); }
    .md-grid-cols-sm-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
    .md-grid-cols-md-3 { grid-template-columns: repeat(3, 1fr); }
    .md-grid-cols-md-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ========== SPACING RESPONSIVE ========== */
@media (max-width: 599px) {
    .p-xs-1 { padding: var(--md-spacing-xs) !important; }
    .p-xs-2 { padding: var(--md-spacing-sm) !important; }
    .p-xs-3 { padding: var(--md-spacing-md) !important; }

    .m-xs-1 { margin: var(--md-spacing-xs) !important; }
    .m-xs-2 { margin: var(--md-spacing-sm) !important; }
    .m-xs-3 { margin: var(--md-spacing-md) !important; }
}

/* ========== TEXT ALIGNMENT RESPONSIVE ========== */
@media (max-width: 599px) {
    .text-xs-center { text-align: center !important; }
    .text-xs-left { text-align: left !important; }
    .text-xs-right { text-align: right !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .text-sm-center { text-align: center !important; }
    .text-sm-left { text-align: left !important; }
    .text-sm-right { text-align: right !important; }
}

/* ========== FLEX RESPONSIVE ========== */
@media (max-width: 599px) {
    .flex-xs-column { flex-direction: column !important; }
    .flex-xs-wrap { flex-wrap: wrap !important; }
}

@media (min-width: 600px) and (max-width: 959px) {
    .flex-sm-column { flex-direction: column !important; }
    .flex-sm-wrap { flex-wrap: wrap !important; }
}