/**
 * Utility Classes - Magazine Layout Edition
 */
/* ===== DISPLAY & GRID ===== */ .d-block { display: block !important; } .d-flex { display: flex !important; } .d-grid { display: grid !important; } .d-none { display: none !important; }

/* Grid Columns */ .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .gap-8 { gap: 2rem; } .gap-4 { gap: 1rem; }

/* ===== SPACING (Margins/Padding) ===== */ .m-0 { margin: 0 !important; } .mt-4 { margin-top: 1rem !important; } .mt-6 { margin-top: 1.5rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-6 { margin-bottom: 1.5rem !important; } .mb-10 { margin-bottom: 2.5rem !important; } .mb-12 { margin-bottom: 3rem !important; }

/* ===== TYPOGRAPHY ===== */ .text-center { text-align: center !important; } .no-underline { text-decoration: none !important; } .uppercase { text-transform: uppercase !important; }

/* Font Sizes */ .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; }

/* Font Weights */ .font-bold { font-weight: 700 !important; } .tracking-widest { letter-spacing: 0.1em; }

/* Colors */ .text-accent { color: var(--color-accent, #067D62) !important; } .text-dark { color: #1a1a1a !important; } .text-medium { color: #555 !important; } .text-light { color: #777 !important; }

/* ===== IMAGES & SIZING ===== */ .width-full, .w-full { width: 100% !important; } .h-48 { height: 12rem !important; } .h-64 { height: 16rem !important; } .object-cover { object-fit: cover !important; } .rounded-lg { border-radius: 8px !important; } .rounded-xl { border-radius: 12px !important; }

/* ===== RESPONSIVE OVERRIDES ===== */ @media (max-width: 768px) { .grid-cols-3 { grid-template-columns: 1fr !important; } .home-hero-split { grid-template-columns: 1fr !important; } }

/* ===== FLUID RESPONSIVE GRID ===== */
.responsive-grid {
    display: grid;
    /* Automatically fit as many 300px columns as possible */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 100%;
}