/* ============================================
   Responsive CSS Variables
   ============================================ */

/* Desktop defaults (base values) */
:root {
    --spacing-section: 2rem;
    --spacing-inline: 1rem;
    --content-padding: 2rem;
    --heading-margin-top: 0;
    --grid-gap: 1.5rem;
    --form-gap: 1rem;
}

/* Tablet overrides */
.tablet {
    --spacing-section: 1.75rem;
    --spacing-inline: 0.875rem;
    --content-padding: 1.5rem;
    --grid-gap: 1.25rem;
}

/* Mobile overrides */
.mobile {
    --spacing-section: 1.5rem;
    --spacing-inline: 0.75rem;
    --content-padding: 1rem;
    --heading-margin-top: 1.5rem;
    --grid-gap: 1rem;
    --form-gap: 0.75rem;
}

/* ============================================
   Responsive Utility Classes
   ============================================ */

/* Responsive stack layout */
.im-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-section);
}

/* Responsive grid layout */
.im-responsive-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.mobile .im-responsive-grid {
    grid-template-columns: 1fr;
}

/* Responsive content container */
.im-content {
    padding: var(--content-padding);
}

/* Responsive heading spacing */
.mobile h1,
.mobile h2,
.mobile h3,
.mobile h4,
.mobile h5,
.mobile h6 {
    margin-top: var(--heading-margin-top);
}

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

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

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

/* Show only on mobile */
.show-mobile-only {
    display: none !important;
}

.mobile .show-mobile-only {
    display: block !important;
}

/* Show only on tablet */
.show-tablet-only {
    display: none !important;
}

.tablet .show-tablet-only {
    display: block !important;
}

/* Show only on desktop */
.show-desktop-only {
    display: none !important;
}

.desktop .show-desktop-only {
    display: block !important;
}

/* ============================================
   Responsive Typography
   ============================================ */

.mobile .im-page-title {
    font-size: 1.75rem;
}

.tablet .im-page-title {
    font-size: 2rem;
}

.desktop .im-page-title {
    font-size: 2.5rem;
}

/* ============================================
   Responsive Layout Adjustments
   ============================================ */

/* Main layout padding adjustments */
.mobile main {
    padding: var(--content-padding);
}

.tablet main {
    padding: var(--content-padding);
}

.desktop main {
    padding: var(--content-padding);
}

/* Responsive form spacing */
.im-form {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap);
}

/* Responsive button groups */
.im-button-group {
    display: flex;
    gap: var(--spacing-inline);
    flex-wrap: wrap;
}

.mobile .im-button-group {
    flex-direction: column;
}

.mobile .im-button-group > * {
    width: 100%;
}

/* Responsive header with actions (title left, buttons right, stack on mobile) */
.im-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--spacing-inline);
}

.im-header-actions-buttons {
    display: flex;
    gap: var(--spacing-inline);
    flex-shrink: 0;
}

.mobile .im-header-actions {
    flex-direction: column;
    align-items: stretch;
}

.mobile .im-header-actions-buttons {
    flex-direction: column;
    width: 100%;
}

.mobile .im-header-actions-buttons > * {
    width: 100%;
}