/* Advoke CV — Breakpoints & Responsive Utilities
   Breakpoint reference:
     xs: 320px  (small phones)
     sm: 480px  (large phones)
     md: 640px  (small tablets)
     lg: 768px  (tablets)
     xl: 1024px (laptops)
     2xl: 1280px (desktops)
     3xl: 1440px (large desktops)
     4xl: 1536px+ (ultra wide)
*/

.container,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-2xl,
.container-3xl {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container,
  .container-xs,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-2xl,
  .container-3xl {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

.container        { max-width: var(--container-xl); }
.container-xs     { max-width: var(--container-xs); }
.container-sm     { max-width: var(--container-sm); }
.container-md     { max-width: var(--container-md); }
.container-lg     { max-width: var(--container-lg); }
.container-xl     { max-width: var(--container-xl); }
.container-2xl    { max-width: var(--container-2xl); }
.container-3xl    { max-width: var(--container-3xl); }

.container-fluid {
  width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container-fluid {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Visibility per breakpoint */
.hide-mobile { display: initial; }
.show-mobile { display: none; }

@media (max-width: 639px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: initial; }
}

.hide-tablet { display: initial; }
.show-tablet { display: none; }

@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: initial; }
}

.hide-desktop { display: initial; }
.show-desktop { display: none; }

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: initial; }
}

/* Flex / grid helpers */
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.grid           { display: grid; }
.inline-grid    { display: inline-grid; }
.block          { display: block; }
.inline-block   { display: inline-block; }
.inline         { display: inline; }
.hidden         { display: none; }

.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.flex-wrap      { flex-wrap: wrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1         { flex: 1 1 0%; }
.flex-auto      { flex: 1 1 auto; }
.flex-none      { flex: none; }
.self-start     { align-self: flex-start; }
.self-center    { align-self: center; }
.self-end       { align-self: flex-end; }

.w-full         { width: 100%; }
.w-auto         { width: auto; }
.h-full         { height: 100%; }
.h-auto         { height: auto; }
.min-w-0        { min-width: 0; }
.min-h-0        { min-height: 0; }

.relative       { position: relative; }
.absolute       { position: absolute; }
.fixed          { position: fixed; }
.sticky         { position: sticky; }
.static         { position: static; }

.inset-0        { inset: 0; }
.top-0          { top: 0; }
.right-0        { right: 0; }
.bottom-0       { bottom: 0; }
.left-0         { left: 0; }

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

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

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }