/*
 * Utility Classes
 * Single-purpose helper classes (loaded last in cascade)
 */

@layer utilities {
  /* ===== ASPECT RATIO ===== */

  .aspect-video {
    aspect-ratio: 16 / 9;
    position: relative;
  }

  .aspect-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* ===== VISIBILITY ===== */

  .hidden {
    display: none !important;
  }

  .invisible {
    visibility: hidden;
  }

  .for-screen-reader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

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

  .contents {
    display: contents;
  }

  .display-block {
    display: block;
  }

  .display-inline-block {
    display: inline-block;
  }

  .display-inline-flex {
    display: inline-flex;
  }

  .flex {
    display: flex;
  }

  /* ===== FLEXBOX ===== */

  .flex-1 {
    flex: 1;
  }

  .align-start {
    align-items: flex-start;
  }

  .align-center {
    align-items: center;
  }

  .align-end {
    align-items: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-space-between {
    justify-content: space-between;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

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

  .flex-item-grow {
    flex: 1;
  }

  .flex-item-no-shrink {
    flex-shrink: 0;
  }

  .gap-quarter {
    gap: var(--block-space-quarter);
  }

  .gap-half {
    gap: var(--block-space-half);
  }

  .gap {
    gap: var(--block-space);
  }

  .gap-1half {
    gap: var(--block-space-1half);
  }

  .gap-double {
    gap: var(--block-space-double);
  }

  .gap-triple {
    gap: calc(var(--block-space) * 3);
  }

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

  /* Margin */
  .margin-none {
    margin: 0;
  }

  .margin-inline-auto {
    margin-inline: auto;
  }

  .margin-block-end-quarter {
    margin-block-end: var(--block-space-quarter);
  }

  .margin-block-end-half {
    margin-block-end: var(--block-space-half);
  }

  .margin-block-end-3quarter {
    margin-block-end: var(--block-space-3quarter);
  }

  .margin-block-end {
    margin-block-end: var(--block-space);
  }

  .margin-block-end-1half {
    margin-block-end: var(--block-space-1half);
  }

  .margin-block-end-double {
    margin-block-end: var(--block-space-double);
  }

  .margin-block-end-triple {
    margin-block-end: calc(var(--block-space) * 3);
  }

  .margin-block-start-quarter {
    margin-block-start: var(--block-space-quarter);
  }

  .margin-block-start-half {
    margin-block-start: var(--block-space-half);
  }

  .margin-block-start {
    margin-block-start: var(--block-space);
  }

  .margin-block-start-1half {
    margin-block-start: var(--block-space-1half);
  }

  .margin-block-start-double {
    margin-block-start: var(--block-space-double);
  }

  .margin-block-start-triple {
    margin-block-start: calc(var(--block-space) * 3);
  }

  .margin-inline-end-half {
    margin-inline-end: var(--block-space-half);
  }

  .margin-inline-end {
    margin-inline-end: var(--block-space-3quarter);
  }

  .margin-inline-start-quarter {
    margin-inline-start: var(--block-space-quarter);
  }

  .margin-inline-start-half {
    margin-inline-start: var(--block-space-half);
  }

  .margin-inline-start {
    margin-inline-start: var(--block-space-3quarter);
  }

  .margin-inline-start-base {
    margin-inline-start: var(--block-space);
  }

  .margin-inline-start-double {
    margin-inline-start: var(--block-space-double);
  }

  /* Padding */
  .pad-none {
    padding: 0;
  }

  .pad-sm {
    padding: var(--block-space-3quarter);
  }

  .pad {
    padding: var(--block-space);
  }

  .pad-double {
    padding: var(--block-space-double);
  }

  .pad-triple {
    padding: calc(var(--block-space) * 3);
  }

  .pad-inline-sm {
    padding-inline: var(--block-space-3quarter);
  }

  .pad-inline {
    padding-inline: var(--block-space);
  }

  .pad-inline-double {
    padding-inline: var(--block-space-double);
  }

  .pad-block-quarter {
    padding-block: var(--block-space-quarter);
  }

  .pad-block-half {
    padding-block: var(--block-space-half);
  }

  .pad-block-sm {
    padding-block: var(--block-space-3quarter);
  }

  .pad-block {
    padding-block: var(--block-space);
  }

  .pad-block-1half {
    padding-block: var(--block-space-1half);
  }

  .pad-block-triple {
    padding-block: calc(var(--block-space) * 3);
  }

  .pad-block-start {
    padding-block-start: var(--block-space);
  }

  .pad-block-start-triple {
    padding-block-start: calc(var(--block-space) * 3);
  }

  .pad-block-end {
    padding-block-end: var(--block-space);
  }

  .pad-inline-start {
    padding-inline-start: var(--block-space);
  }

  .pad-inline-end {
    padding-inline-end: var(--block-space);
  }

  /* ===== WIDTH/HEIGHT ===== */

  .full-width {
    width: 100%;
  }

  .width-auto {
    width: auto;
  }

  .full-height {
    height: 100%;
  }

  .height-auto {
    height: auto;
  }

  .min-height-screen {
    min-height: 100vh;
  }

  .min-width-zero {
    min-width: 0;
  }

  .min-width-max {
    min-width: max-content;
  }

  /* ===== TEXT SIZE ===== */

  .txt-xx-small {
    font-size: var(--text-xx-small);
  }

  .txt-x-small {
    font-size: var(--text-x-small);
  }

  .txt-small {
    font-size: var(--text-small);
  }

  .txt-normal {
    font-size: var(--text-normal);
  }

  .txt-medium {
    font-size: var(--text-medium);
  }

  .txt-large {
    font-size: var(--text-large);
  }

  .txt-x-large {
    font-size: var(--text-x-large);
  }

  .txt-xx-large {
    font-size: var(--text-xx-large);
  }

  /* ===== FONT WEIGHT ===== */

  .font-weight-light {
    font-weight: 400;
  }

  .font-weight-bold {
    font-weight: 400;
  }

  /* ===== TEXT ALIGNMENT ===== */

  .align-text-left {
    text-align: left;
  }

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

  .align-text-right {
    text-align: right;
  }

  /* ===== TYPOGRAPHY ===== */

  .italic {
    font-style: normal;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .tracking-tight {
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    letter-spacing: var(--tracking-wider);
  }

  .leading-tight {
    line-height: var(--leading-tight);
  }

  .leading-normal {
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    line-height: var(--leading-relaxed);
  }

  .leading-loose {
    line-height: var(--leading-loose);
  }

  .line-through {
    text-decoration: line-through;
  }

  .no-underline {
    text-decoration: none;
  }

  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ===== COLORS ===== */

  .text-gray-darker {
    color: var(--color-gray-darker);
  }

  .text-gray-dark {
    color: var(--color-gray-dark);
  }

  .text-gray {
    color: var(--color-gray);
  }

  .text-gray-light {
    color: var(--color-gray-light);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-blue {
    color: var(--color-blue);
  }

  .text-blue-dark {
    color: var(--color-blue-dark);
  }

  .text-blue-light {
    color: var(--color-blue-light);
  }

  .text-red {
    color: var(--color-red);
  }

  .text-red-light {
    color: var(--color-red-light);
  }

  .text-warning-dark {
    color: var(--color-warning-dark);
  }

  .text-positive-dark {
    color: var(--color-positive-dark);
  }

  .text-negative-dark {
    color: var(--color-negative-dark);
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-gray-lightest {
    background-color: var(--color-gray-lightest);
  }

  .bg-gray-lighter {
    background-color: var(--color-gray-lighter);
  }

  .bg-blue-dark {
    background-color: var(--color-blue-dark);
  }

  .bg-blue-lightest {
    background-color: var(--color-blue-lightest);
  }

  .bg-blue-light {
    background-color: var(--color-blue-light);
  }

  .bg-positive-light {
    background-color: var(--color-positive-light);
  }

  .bg-negative-light {
    background-color: var(--color-negative-light);
  }

  /* ===== BORDERS ===== */

  .border {
    border: var(--border-standard);
  }

  .border-ink {
    border-color: var(--color-gray-darker);
  }

  .border-t {
    border-top: var(--border-standard);
  }

  .border-b {
    border-bottom: var(--border-standard);
  }

  .border-l {
    border-left: var(--border-standard);
  }

  .border-l-4 {
    border-left: 4px solid var(--color-gray-medium);
  }

  .border-4 {
    border-width: 4px;
  }

  .rounded {
    border-radius: var(--radius);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-full {
    border-radius: var(--radius-full);
  }

  /* ===== SHADOWS ===== */

  .shadow {
    box-shadow: var(--shadow);
  }

  /* ===== POSITION ===== */

  .position-relative {
    position: relative;
  }

  .position-absolute {
    position: absolute;
  }

  .position-fixed {
    position: fixed;
  }

  .position-sticky {
    position: sticky;
  }

  .inset-0 {
    inset: 0;
  }

  .top-0 {
    top: 0;
  }

  .right-0 {
    right: 0;
  }

  .bottom-0 {
    bottom: 0;
  }

  .left-0 {
    left: 0;
  }

  .z-10 {
    z-index: var(--z-base);
  }

  .z-dropdown {
    z-index: var(--z-dropdown);
  }

  .z-modal {
    z-index: var(--z-modal);
  }

  /* ===== OVERFLOW ===== */

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  /* ===== OBJECT FIT ===== */

  .object-cover {
    object-fit: cover;
  }

  .object-contain {
    object-fit: contain;
  }

  /* ===== CURSOR ===== */

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  /* ===== TRANSITIONS ===== */

  .transition-colors {
    transition: color 150ms ease,
                background-color 150ms ease,
                border-color 150ms ease;
  }

  .transition-shadow {
    transition: box-shadow 150ms ease;
  }

  .transition-transform {
    transition: transform 150ms ease;
  }

  .transition-all {
    transition: all 150ms ease;
  }

  /* ===== TRANSFORMS ===== */

  .rotate-180 {
    transform: rotate(180deg);
  }

  /* ===== OPACITY ===== */

  .opacity-0 {
    opacity: 0;
  }

  .opacity-50 {
    opacity: 0.5;
  }

  .opacity-70 {
    opacity: 0.7;
  }

  .opacity-75 {
    opacity: 0.75;
  }

  .opacity-85 {
    opacity: 0.85;
  }

  .opacity-100 {
    opacity: 1;
  }

  /* ===== HOVER EFFECTS ===== */
  /* Only apply hover effects on devices that support hover */

  @media (any-hover: hover) {
    .hover--shadow-lg:hover {
      box-shadow: var(--shadow);
    }

    .hover--bg-gray-lightest:hover {
      background-color: var(--color-gray-lightest);
    }

    .hover--text-gray-darker:hover {
      color: var(--color-gray-darker);
    }

    .hover--text-gray-dark:hover {
      color: var(--color-gray-dark);
    }
  }

  /* ===== RESPONSIVE UTILITIES ===== */

  @media (min-width: 640px) {
    .sm--txt-x-large {
      font-size: var(--text-x-large);
    }

    .sm--txt-xx-large {
      font-size: var(--text-xx-large);
    }

    .sm--flex-row {
      flex-direction: row;
    }

    .sm--pad-block-triple {
      padding-block: calc(var(--block-space) * 3);
    }

    .sm--pad-double {
      padding: var(--block-space-double);
    }
  }

  @media (min-width: 800px) {
    .md--txt-medium {
      font-size: var(--text-medium);
    }

    .md--txt-normal {
      font-size: var(--text-normal);
    }

    .md--align-text-left {
      text-align: left;
    }

    .md--flex-row {
      flex-direction: row;
    }

    .md--margin-block-end-none {
      margin-block-end: 0;
    }

    .md--justify-start {
      justify-content: flex-start;
    }

    .md--justify-center {
      justify-content: center;
    }
  }

  @media (min-width: 1280px) {
    .lg--txt-x-large {
      font-size: var(--text-x-large);
    }

    .lg--txt-xx-large {
      font-size: var(--text-xx-large);
    }

    .lg--txt-medium {
      font-size: var(--text-medium);
    }

    .lg--pad-triple {
      padding: calc(var(--block-space) * 3);
    }

    .lg--gap-triple {
      gap: calc(var(--block-space) * 3);
    }

    .lg--margin-block-end-triple {
      margin-block-end: calc(var(--block-space) * 3);
    }

    .lg--position-sticky {
      position: sticky;
    }

    .lg--top-8 {
      top: var(--block-space-double);
    }
  }

  /* ===== TOUCH DEVICE VISIBILITY ===== */

  /* Hide on touch devices */
  @media (any-hover: none) and (pointer: coarse) {
    .hide-on-touch {
      display: none !important;
    }
  }

  /* Show only on touch devices */
  @media (any-hover: hover) and (pointer: fine) {
    .show-on-touch {
      display: none !important;
    }
  }

  /* ===== PWA DISPLAY MODE ===== */

  @media (display-mode: standalone) {
    .hide-in-pwa {
      display: none !important;
    }
  }

  @media not (display-mode: standalone) {
    .hide-in-browser {
      display: none !important;
    }
  }

  /* ===== SAFE AREA ===== */

  .safe-area-inset-top {
    padding-block-start: env(safe-area-inset-top);
  }

  .safe-area-inset-bottom {
    padding-block-end: env(safe-area-inset-bottom);
  }

  .safe-area-inset-x {
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  }

  .safe-area-inset-y {
    padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
  }

  /* ===== SCREEN-READER ONLY ===== */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ===== SCROLLBAR ===== */

  .hide-scrollbar {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}