/* ---------------------------------------------------------------
    LAYOUT UTILITIES
--------------------------------------------------------------- */

/* Flex utilities */
.flex           { display: flex; }
.flex-inline    { display: inline-flex; }

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

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

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

/* Align items */
.items-stretch  { align-items: stretch; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.items-center   { align-items: center; }
.items-baseline { align-items: baseline; }

/* Row vertical centering */
.flex-center { 
    display: flex;
    align-items: center;
 }

/* Perfect centering */
.flex-center-center { 
  display: flex;
  justify-content: center;
  align-items: center;
 }

/* Space-between + vertically centered */
.flex-between-center { 
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

/* Column layout centered both axes */
.flex-col-center { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 }

/* Equal-height columns */
.flex-equal > * { 
  flex: 1 1 0%;
  display: flex;
 }

/* Grid utilities */
.grid    { display: grid; }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

/* Grid Span helpers */
.span-1  { grid-column: span 1 !important; }
.span-2  { grid-column: span 2 !important; }
.span-3  { grid-column: span 3 !important; }
.span-4  { grid-column: span 4 !important; }
.span-5  { grid-column: span 5 !important; }
.span-6  { grid-column: span 6 !important; }
.span-7  { grid-column: span 7 !important; }
.span-8  { grid-column: span 8 !important; }
.span-9  { grid-column: span 9 !important; }
.span-10 { grid-column: span 10 !important; }
.span-11 { grid-column: span 11 !important; }
.span-12 { grid-column: span 12 !important; }

@media (max-width: 768px) { 
  .grid { 
    grid-template-columns: 1fr !important;
  }

  .grid-4 { 
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-4.full { 
    grid-template-columns: 1fr !important;
  }

  .span-1,
  .span-2, 
  .span-3, 
  .span-4, 
  .span-5, 
  .span-6, 
  .span-7, 
  .span-8, 
  .span-9, 
  .span-10, 
  .span-11, 
  .span-12 { 
    grid-column: span 1 !important;
  }
 }

/* Space helpers */
.gap-none { gap: 0; }
.gap-xs   { gap: var(--gap-xs); }
.gap-sm   { gap: var(--gap-sm); }
.gap-md   { gap: var(--gap-md); }
.gap-lg   { gap: var(--gap-lg); }
.gap-xl   { gap: var(--gap-xl); }
.gap-2xl  { gap: var(--gap-2xl); }

/* Margin helpers */
.mt-xs  { margin-top: var(--gap-xs); }
.mt-sm  { margin-top: var(--gap-sm); }
.mt-md  { margin-top: var(--gap-md); }
.mt-lg  { margin-top: var(--gap-lg); }
.mt-xl  { margin-top: var(--gap-xl); }
.mt-2xl { margin-top: var(--gap-2xl); }
.mt-3xl { margin-top: var(--space-16); }

.mt-none { margin-top: 0; }
.mb-none { margin-bottom: 0; }
.pt-none { padding-top: 0; }
.pb-none { padding-bottom: 0; }

/* ---------------------------------------------------------------
    TYPOGRAPHY UTILITIES
--------------------------------------------------------------- */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.text-2xs  { font-size: var(--text-2xs); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-reg  { font-size: var(--text-reg); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }

.weight-light    { font-weight: var(--weight-light); }
.weight-normal   { font-weight: var(--weight-normal); }
.weight-medium   { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }

.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-justify { text-align: justify; }

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

.italic     { font-style: italic; }
.non-italic { font-style: normal; }
.en-italic  { font-style: italic; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }

.max-char-narrow    { max-width: var(--max-char-narrow); }
.max-char-medium    { max-width: var(--max-char-medium); }
.max-char-wide      { max-width: var(--max-char-wide); }

.text-base       { color: var(--text-base); }
.text-inverse    { color: var(--text-inverse); }
.text-inverse-75 { color: var(--text-inverse-75); }
.color-primary   { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }

[data-lang="si"] .en-italic {
  font-style: normal;
}

/* ---------------------------------------------------------------
    IMAGE UTILITIES
--------------------------------------------------------------- */

/* Aspect ratios */
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-9-16 { aspect-ratio: 9/16; }
.aspect-4-3  { aspect-ratio: 4/3; }
.aspect-3-4  { aspect-ratio: 3/4; }
.aspect-1-1  { aspect-ratio: 1/1; }

/* Icon helpers */
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------
    BORADER UTILITIES
--------------------------------------------------------------- */

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-3xl  { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

.rounded-t    { 
  border-top-left-radius: var(--radius-md); 
  border-top-right-radius: var(--radius-md); }
.rounded-r    { 
  border-top-right-radius: var(--radius-md); 
  border-bottom-right-radius: var(--radius-md); }
.rounded-b    { 
  border-bottom-right-radius: var(--radius-md); 
  border-bottom-left-radius: var(--radius-md); }
.rounded-l    { 
  border-top-left-radius: var(--radius-md); 
  border-bottom-left-radius: var(--radius-md); }

.rounded-tl   { border-top-left-radius: var(--radius-md); }
.rounded-tr   { border-top-right-radius: var(--radius-md); }
.rounded-br   { border-bottom-right-radius: var(--radius-md); }
.rounded-bl   { border-bottom-left-radius: var(--radius-md); }

/* ---------------------------------------------------------------
  OTHER
--------------------------------------------------------------- */

.pointer { cursor: pointer; }