/**
 * SADAKA DERNEĞİ - RESPONSIVE UTILITIES
 * Mobile-first responsive design utilities
 * Version: 1.0.0
 */

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/*
  Mobile: 320px - 767px (default, no media query needed)
  Tablet: 768px - 1023px
  Desktop: 1024px - 1439px
  Large Desktop: 1440px+
*/

/* ============================================
   RESPONSIVE GRID SYSTEM
   ============================================ */

.grid {
    display: grid;
    gap: var(--space-4);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

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

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

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Auto-fit responsive grid */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Tablet breakpoint (768px+) */
@media (min-width: 768px) {
    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Desktop breakpoint (1024px+) */
@media (min-width: 1024px) {
    .lg\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* ============================================
   RESPONSIVE DISPLAY
   ============================================ */

/* Mobile (default) */
.mobile-only {
    display: block;
}

.tablet-only,
.desktop-only {
    display: none;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }

    .tablet-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }

    .md\:d-none {
        display: none !important;
    }

    .md\:d-block {
        display: block !important;
    }

    .md\:d-flex {
        display: flex !important;
    }

    .md\:d-grid {
        display: grid !important;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {

    .mobile-only,
    .tablet-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }

    .lg\:d-none {
        display: none !important;
    }

    .lg\:d-block {
        display: block !important;
    }

    .lg\:d-flex {
        display: flex !important;
    }

    .lg\:d-grid {
        display: grid !important;
    }
}

/* ============================================
   RESPONSIVE SPACING
   ============================================ */

/* Tablet spacing */
@media (min-width: 768px) {
    .md\:p-0 {
        padding: 0 !important;
    }

    .md\:p-4 {
        padding: var(--space-4) !important;
    }

    .md\:p-6 {
        padding: var(--space-6) !important;
    }

    .md\:p-8 {
        padding: var(--space-8) !important;
    }

    .md\:m-0 {
        margin: 0 !important;
    }

    .md\:m-auto {
        margin: auto !important;
    }

    .md\:mt-4 {
        margin-top: var(--space-4) !important;
    }

    .md\:mt-8 {
        margin-top: var(--space-8) !important;
    }

    .md\:mb-4 {
        margin-bottom: var(--space-4) !important;
    }

    .md\:mb-8 {
        margin-bottom: var(--space-8) !important;
    }
}

/* Desktop spacing */
@media (min-width: 1024px) {
    .lg\:p-0 {
        padding: 0 !important;
    }

    .lg\:p-4 {
        padding: var(--space-4) !important;
    }

    .lg\:p-6 {
        padding: var(--space-6) !important;
    }

    .lg\:p-8 {
        padding: var(--space-8) !important;
    }

    .lg\:p-12 {
        padding: var(--space-12) !important;
    }

    .lg\:m-0 {
        margin: 0 !important;
    }

    .lg\:m-auto {
        margin: auto !important;
    }

    .lg\:mt-8 {
        margin-top: var(--space-8) !important;
    }

    .lg\:mt-12 {
        margin-top: var(--space-12) !important;
    }

    .lg\:mb-8 {
        margin-bottom: var(--space-8) !important;
    }

    .lg\:mb-12 {
        margin-bottom: var(--space-12) !important;
    }
}

/* ============================================
   RESPONSIVE TEXT
   ============================================ */

/* Tablet text alignment */
@media (min-width: 768px) {
    .md\:text-left {
        text-align: left !important;
    }

    .md\:text-center {
        text-align: center !important;
    }

    .md\:text-right {
        text-align: right !important;
    }
}

/* Desktop text alignment */
@media (min-width: 1024px) {
    .lg\:text-left {
        text-align: left !important;
    }

    .lg\:text-center {
        text-align: center !important;
    }

    .lg\:text-right {
        text-align: right !important;
    }
}

/* ============================================
   RESPONSIVE FLEX
   ============================================ */

/* Tablet flex */
@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction: row !important;
    }

    .md\:flex-column {
        flex-direction: column !important;
    }

    .md\:justify-start {
        justify-content: flex-start !important;
    }

    .md\:justify-center {
        justify-content: center !important;
    }

    .md\:justify-between {
        justify-content: space-between !important;
    }
}

/* Desktop flex */
@media (min-width: 1024px) {
    .lg\:flex-row {
        flex-direction: row !important;
    }

    .lg\:flex-column {
        flex-direction: column !important;
    }

    .lg\:justify-start {
        justify-content: flex-start !important;
    }

    .lg\:justify-center {
        justify-content: center !important;
    }

    .lg\:justify-between {
        justify-content: space-between !important;
    }
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================
   RESPONSIVE TABLES
   ============================================ */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .table-responsive table {
        min-width: 600px;
    }
}

/* ============================================
   ASPECT RATIO UTILITIES
   ============================================ */

.aspect-ratio {
    position: relative;
    width: 100%;
}

.aspect-ratio::before {
    content: '';
    display: block;
    padding-bottom: var(--aspect-ratio, 100%);
}

.aspect-ratio>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aspect-square {
    --aspect-ratio: 100%;
}

.aspect-video {
    --aspect-ratio: 56.25%;
}

/* 16:9 */
.aspect-4-3 {
    --aspect-ratio: 75%;
}

.aspect-3-2 {
    --aspect-ratio: 66.67%;
}

/* ============================================
   MOBILE TOUCH TARGETS
   ============================================ */

@media (max-width: 767px) {

    /* Ensure minimum touch target size of 44x44px */
    .btn,
    button,
    a.btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Increase form input sizes for mobile */
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: var(--space-4);
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
    }

    .btn {
        border: 1px solid black;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: high) {
    :root {
        --border-light: var(--color-gray-400);
        --border-medium: var(--color-gray-500);
        --border-dark: var(--color-gray-600);
    }

    .btn-outline {
        border-width: 2px;
    }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: var(--color-gray-900);
        --bg-secondary: var(--color-gray-800);
        --bg-tertiary: var(--color-gray-700);

        --text-primary: var(--color-gray-100);
        --text-secondary: var(--color-gray-300);
        --text-tertiary: var(--color-gray-400);

        --border-light: var(--color-gray-700);
        --border-medium: var(--color-gray-600);
        --border-dark: var(--color-gray-500);
    }

    .card {
        background-color: var(--color-gray-800);
    }

    .form-input,
    .form-select,
    .form-textarea {
        background-color: var(--color-gray-800);
        border-color: var(--color-gray-600);
        color: var(--color-gray-100);
    }
}