/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
:root{ color-scheme: only light; }
body{
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg{
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; }

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

ul, ol{ padding-left: 1.25rem; }

html:focus-within{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   LAYOUT VARIABLES
   ========================================================= */
:root{
  --container: 1200px;
  --bp-xs: 767px;
  --gutter: 24px;
  --gap: 24px;
}


/* =========================================================
   CONTAINERS
   ========================================================= */
.container{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.container-fluid{
  width: 100%;
  padding-inline: var(--gutter);
}

/* =========================================================
   GRID SYSTEM (Bootstrap-like)
   ========================================================= */
.row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

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

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767px){
  :root{ --gutter: 16px; --gap: 16px; }

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

/* =========================================================
   BASIC SECTIONS
   ========================================================= */
.section{ padding-block: 64px; }
@media (max-width: 768px){
  .section{ padding-block: 40px; }
}

/* =========================================================
   RWD GRID (mobile control from HTML)
   ========================================================= */

@media (max-width: 1024px){
  .col-md-6 { grid-column: span 6; }
}

@media (max-width: 767px){

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

}

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

@media (min-width: 768px){
  .visible-xs {
    display: none !important;
  }
}

@media (max-width: 767px){
  .hidden-xs {
    display: none !important;
  }
}