/* ==========================================================================
   Display & Layout
   ========================================================================== */

/* Debug */
.dev {
    background: rgb(128 0 0 / 0.3) !important;
}
.dev-blue {
    background: rgb(0 0 128 / 0.3) !important;
}
.dev-green {
    background: rgb(0 128 0 / 0.3) !important;
}
.overflow-y-auto {
    overflow-y: auto;
}

/* Display */
.block {
    display: block;
}
.flex {
    display: flex;
}

.flex-shrink-0 {
    flex-shrink: 0;
}
.flex-grow {
    flex-grow: 1;
}
.flex-inline {
    display: inline-flex;
}
.flex-wrap {
    flex-wrap: wrap;
}
.grid {
    display: grid;
}
.hidden {
    display: none;
}
.visible-if-only-child {
    display: none;
    &:only-child {
        display: block;
    }
}
.hidden-if-only-child {
    display: block;
    &:only-child {
        display: none;
    }
}


/* Position */
.position-relative {
    position: relative;
}
.position-sticky {
    position: sticky;
}
.position-fixed {
    position: fixed;
}
.position-absolute {
    position: absolute;
}

.txt-align-center {
    text-align: center;
}

.txt-align-start {
    text-align: start;
}

.txt-align-end {
    text-align: end;
}

.coverall {
    position: absolute;
    inset: 0;
    z-index: var(--layer-coverall);
}
.coverall * {
    pointer-events: auto;
  }

.top-0 {
    top: 0;
}
.top-4 {
    top: 2.5rem;
}
.top-100 {
    top: 100%;
}
.bottom-0 {
    bottom: 0;
}
.bottom-100 {
    bottom: 100%;
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}
.right-50 {
    transform: translateX(-50%);
    left: 50%;
}

.z-bottom {
    z-index: var(--layer-bottom);
}
.z-middle {
    z-index: var(--layer-middle);
}
.z-top {
    z-index: var(--layer-top);
}
.z-modal {
    z-index: var(--layer-modal);
}
.z-toast {
    z-index: var(--layer-toast);
}
.z-dropdown {
    z-index: var(--layer-dropdown);
}
.z-navigation {
    z-index: var(--layer-navigation);
}
.z-important {
    z-index: var(--layer-important);
}

/* ==========================================================================
   Flexbox
   ========================================================================== */

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Flex Properties */
.flex-wrap {
    flex-wrap: wrap;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-none {
    flex: 0 0 auto;
}
.flex-item-grow {
    flex-grow: 1;
}
.flex-item-shrink {
    flex-shrink: 1;
}
.flex-item-no-shrink {
    flex-shrink: 0;
}

/* Alignment */
.justify-end {
    justify-content: flex-end;
}
.justify-start {
    justify-content: start;
}
.justify-center {
    justify-content: center;
}
.justify-space-around {
    justify-content: space-around;
}
.justify-space-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}
.align-start {
    align-items: start;
}
.align-end {
    align-items: end;
}
.align-content-center {
    align-content: center;
}
.align-self-start {
    align-self: start;
}

/* ==========================================================================
   Grid
   ========================================================================== */

@media (min-width: 48em) {
    .grid-container {
        display: grid;
        gap: var(--column-gap, var(--size-3));
    }

    .grid-container:has(:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 auto;
    }
    .place-items-center {
        place-items: center;
    }

    .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-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.ratio-widescreen {
    aspect-ratio: var(--ratio-widescreen);
}
.ratio-landscape {
    aspect-ratio: var(--ratio-landscape);
}
.ratio-square {
    aspect-ratio: 1;
}
.ratio-portrait {
    aspect-ratio: var(--ratio-portrait);
}
.ratio-ultrawide {
    aspect-ratio: var(--ratio-ultrawide);
}
.ratio-golden {
    aspect-ratio: var(--ratio-golden);
}

/* ==========================================================================
   Spacing
   ========================================================================== */

/* Gap */
.gap {
    column-gap: var(--size-3);
    row-gap: var(--size-3);
}
.gap-wide {
    column-gap: var(--size-4);
    row-gap: var(--size-4);
}
.gap-row {
    row-gap: var(--size-3);
}
.gap-half {
    column-gap: var(--size-2);
    row-gap: var(--size-2);
}

/* Padding */
.pad {
    padding: var(--size-3);
}
.pad-half {
    padding: var(--size-2);
}
.pad-double {
    padding: var(--size-6);
}
.pad-block {
    padding-block: var(--size-3);
}
.pad-inline {
    padding-inline: var(--size-3);
}
.unpad {
    padding: 0;
}

/* Margins */
.margin {
    margin: var(--size-3);
}
.margin-block {
    margin-block: var(--size-3);
}
.margin-block-start {
    margin-block-start: var(--size-3);
}
.margin-block-end {
    margin-block-end: var(--size-3);
}
.margin-half-block-end {
    margin-block-end: var(--size-1);
}
.margin-block-double {
    margin-block: var(--size-6);
}
.margin-inline {
    margin-inline: var(--size-3);
}
.margin-none {
    margin: 0;
}
.center {
    margin-inline: auto;
}

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

/* Text Scale */
.display-large {
    font-size: var(--font-size-headline-large);
}
.display-medium {
    font-size: var(--font-size-headline-medium);
}
.display-small {
    font-size: var(--font-size-headline-small);
}
.headline-large {
    font-size: var(--font-size-headline-large);
}
.headline-medium {
    font-size: var(--font-size-headline-medium);
}
.headline-small {
    font-size: var(--font-size-headline-small);
}
.title-large {
    font-size: var(--font-size-title-large);
}
.title-medium {
    font-size: var(--font-size-title-medium);
}
.title-small {
    font-size: var(--font-size-title-small);
}
.body-large {
    font-size: var(--font-size-body-large);
}
.body-medium {
    font-size: var(--font-size-body-medium);
}
.body-small {
    font-size: var(--font-size-body-small);
}

/* Text Alignment */
.txt-align-center {
    text-align: center;
}
.txt-align-start {
    text-align: start;
}
.txt-align-end {
    text-align: end;
}

/* Text Properties */
.txt-undecorated {
    text-decoration: none;
}
.txt-nowrap {
    white-space: nowrap;
}
.txt-uppercase {
    text-transform: uppercase;
}
.txt-spread {
    letter-spacing: var(--font-letterspacing-5);
}
.txt-subtle {
    color: var(--outline);
}
.txt-truncate {    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.txt-ellipse {
    text-overflow: ellipsis;
}
.no-link {
    text-decoration: none;
    color: var(--color-ink);
}

/* Line Height */
.line-height-comfortable {
    line-height: 1.618;
}
.line-height-standard {
    line-height: 1.3;
}

/* Font Families */
.font-mono,
.font-code {
    font-family: var(--font-mono);
}
.font-serif {
    font-family: var(--font-serif);
}
.font-bold {
    font-weight: var(--font-weight-7);
}
.font-italic {
    font-style: italic;
}

/* Headings */
:where(.h1, .h2, .h3, .h4, .h5, .h6) {
    font-weight: 800;
    hyphens: auto;
    letter-spacing: -0.02ch;
    line-height: 1.1;
    margin-block: 0.65em;
    overflow-wrap: break-word;
    text-wrap: balance;
}

:where(h1, h2, h3, h4, h5, h6) {
    display: block;
}
:where(h1, h2) {
    text-wrap: balance;
}

/* Updated heading sizes to match MD3 type scale */
:is(h1, .h1),
:is(h1, .headline) {
    font-size: var(--font-size-fluid-large);
    font-weight: var(--font-weight-7);
    line-height: 1.2;
    margin-bottom: var(--size-4);
}

:is(.h2) {
    font-size: var(--font-size-headline-medium);
}
:is(.h3) {
    font-size: var(--font-size-headline-small);
}
:is(.h4) {
    font-size: var(--font-size-body-large);
}
:is(.h5) {
    font-size: var(--font-size-headline-medium);
}
:is(.h6) {
    font-size: var(--font-size-headline-small);
}

/* Text Content */
:is(p, ul, ol, dl, blockquote, pre, figure, table, hr) {
    margin-block: 0.65lh;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

/* ==========================================================================
   Sizing
   ========================================================================== */

/* Square Sizes */
.size-1 {
    width: var(--size-1);
    height: var(--size-1);
}
.size-2 {
    width: var(--size-2);
    height: var(--size-2);
}
.size-3 {
    width: var(--size-3);
    height: var(--size-3);
}
.size-4 {
    width: var(--size-4);
    height: var(--size-4);
}
.size-5 {
    width: var(--size-5);
    height: var(--size-5);
}
.size-6 {
    width: var(--size-6);
    height: var(--size-6);
}
.size-7 {
    width: var(--size-7);
    height: var(--size-7);
}

/* Content Width */
.size-content-1 {
    width: min(100%, var(--size-content-1));
    margin-inline: auto;
}
.size-content-2 {
    width: min(100%, var(--size-content-2));
    margin-inline: auto;
}
.size-content-3 {
    width: min(100%, var(--size-content-3));
    margin-inline: auto;
}
.size-content-4 {
    width: min(100%, var(--size-content-4));
    margin-inline: auto;
}
.size-content-5 {
    width: min(100%, var(--size-content-5));
    margin-inline: auto;
}
.size-content-6 {
    width: min(100%, var(--size-content-6));
    margin-inline: auto;
}
.size-content-7 {
    width: min(100%, var(--size-content-7));
    margin-inline: auto;
}

/* Container */
.container {
    --layer-container-width: var(--size-content-5);
    --layer-container-padding-inline: 2lh;
    --layer-container-padding-block: var(--size-relative-11);
    padding: var(--layer-container-padding-inline) var(--layer-container-padding-block);
    inline-size: min(100%, var(--layer-container-width));
    margin: 0 auto;
}

/* Dimension Utilities */
.full-height {
    min-height: 100%;
    height: 100%;
}
.full-width {
    inline-size: 100%;
}
.half-height {
    block-size: 50%;
}
.half-width {
    inline-size: 50%;
}
.quarter-width {
    inline-size: 25%;
}

/* ==========================================================================
   Borders & Radius - Updated to MD3
   ========================================================================== */

.radius-none {
    border-radius: var(--radius-none);
}
.radius-xs {
    border-radius: var(--radius-extra-small);
}
.radius-sm {
    border-radius: var(--radius-small);
}
.radius-md {
    border-radius: var(--radius-medium);
}
.radius-lg {
    border-radius: var(--radius-large);
}
.radius-xl {
    border-radius: var(--radius-extra-large);
}
.border-bottom {
    border-bottom: 1px solid var(--outline-variant);
}

/* ==========================================================================
   Overflow & Aspect Ratio
   ========================================================================== */

.overflow-x {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.overflow-y {
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
.overflow-clip {
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}
.overflow-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

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

/* ==========================================================================
   Accessibility
   ========================================================================== */

.sr-only {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

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

@media (max-width: 767px) {
    .grid-container,
    .container {
        display: block;
        padding: 1rem;
    }
    .mobile\:flex {
        display: flex;
    }

    .grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--size-3);
    }

    .desktop-only {
        display: none !important;
    }

    
}
@media (min-width: 40em) {
    .mobile-only {
        display: none !important;
    }
}

.fixed-content {
    padding: var(--size-2);
    background: var(--layer-surface-container);
    color: var(--on-surface);
    border-top: 1px solid var(--outline-variant);
    flex-shrink: 0;
}
.overflow-line-clamp {
    -webkit-line-clamp: var(--lines, 2);
    -webkit-box-orient: vertical;
    line-clamp: var(--lines, 2);
    display: -webkit-box;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
}
.outlined {
    border: 1px solid var(--outline);
}

.outline-variant {
    border: 1px solid var(--outline-variant);
}

.outlined-block-start {
    border-block-start: 1px solid var(--outline);
}

.outline-variant-block-start {
    border-block-start: 1px solid var(--outline-variant);
}

.link {
text-decoration: underline;
color: var(--primary);

&:visited {
    color: var(--primary-variant);
}
}

.no-link {
text-decoration: none;
color: var(--on-surface);
&:hover {
    text-decoration: underline;
}
}