/* Responsive grid + utility classes shared across public/admin pages. */
/*!
 * responsive.css v1.0.0
 * Mobile-first 12-col flex grid + utilities
 */

:root{
  --gutter-x: 1rem;
  --gutter-y: 0;
  --container-px: 1rem;

  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-xxl: 1320px;

  /* Base font size steps (mobile-first) */
  --fs-sm: 0.95em;
  --fs-lg: 1.15em;
  --fs-xl: 1.20em;
  --fs-xxl: 1.90em;
}

*,*::before,*::after{ box-sizing: border-box; }
img,svg,video,canvas{ max-width:100%; height:auto; }

/* Containers */
.container,
.container-fluid{
  width:100%;
  margin-left:auto; margin-right:auto;
  padding-left:var(--container-px);
  padding-right:var(--container-px);
}
@media (min-width: 576px){ .container{ max-width: var(--container-sm); } }
@media (min-width: 768px){ .container{ max-width: var(--container-md); } }
@media (min-width: 992px){ .container{ max-width: var(--container-lg); } }
@media (min-width: 1200px){ .container{ max-width: var(--container-xl); } }
@media (min-width: 1400px){ .container{ max-width: var(--container-xxl); } }

/* Rows & Columns */
.row{
  display:flex;
  flex-wrap:wrap;
  --row-base-gutter-x: var(--gutter-x);
  --row-base-gutter-y: var(--gutter-y);
  --row-gutter-x: var(--row-base-gutter-x);
  --row-gutter-y: var(--row-base-gutter-y);
  margin-left: calc(var(--row-gutter-x)*-0.5);
  margin-right: calc(var(--row-gutter-x)*-0.5);
  margin-top: calc(var(--row-gutter-y)*-1);
}
.row > *{
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-left: calc(var(--row-gutter-x)*0.5);
  padding-right: calc(var(--row-gutter-x)*0.5);
  margin-top: var(--row-gutter-y);
}

/* Fixed spans: 12-col grid (mobile default) */
.col-1  { flex:0 0 auto; width:8.3333%; }
.col-2  { flex:0 0 auto; width:16.6667%; }
.col-3  { flex:0 0 auto; width:25%; }
.col-4  { flex:0 0 auto; width:33.3333%; }
.col-5  { flex:0 0 auto; width:41.6667%; }
.col-6  { flex:0 0 auto; width:50%; }
.col-7  { flex:0 0 auto; width:58.3333%; }
.col-8  { flex:0 0 auto; width:66.6667%; }
.col-9  { flex:0 0 auto; width:75%; }
.col-10 { flex:0 0 auto; width:83.3333%; }
.col-11 { flex:0 0 auto; width:91.6667%; }
.col-12 { flex:0 0 auto; width:100%; }

/* Breakpoint variants */
@media (min-width: 576px){
  .col-sm-1  { width:8.3333%; }  .col-sm-2  { width:16.6667%; }
  .col-sm-3  { width:25%; }      .col-sm-4  { width:33.3333%; }
  .col-sm-5  { width:41.6667%; } .col-sm-6  { width:50%; }
  .col-sm-7  { width:58.3333%; } .col-sm-8  { width:66.6667%; }
  .col-sm-9  { width:75%; }      .col-sm-10 { width:83.3333%; }
  .col-sm-11 { width:91.6667%; } .col-sm-12 { width:100%; }
}
@media (min-width: 768px){
  .col-md-1  { width:8.3333%; }  .col-md-2  { width:16.6667%; }
  .col-md-3  { width:25%; }      .col-md-4  { width:33.3333%; }
  .col-md-5  { width:41.6667%; } .col-md-6  { width:50%; }
  .col-md-7  { width:58.3333%; } .col-md-8  { width:66.6667%; }
  .col-md-9  { width:75%; }      .col-md-10 { width:83.3333%; }
  .col-md-11 { width:91.6667%; } .col-md-12 { width:100%; }
}
@media (min-width: 992px){
  .col-lg-1  { width:8.3333%; }  .col-lg-2  { width:16.6667%; }
  .col-lg-3  { width:25%; }      .col-lg-4  { width:33.3333%; }
  .col-lg-5  { width:41.6667%; } .col-lg-6  { width:50%; }
  .col-lg-7  { width:58.3333%; } .col-lg-8  { width:66.6667%; }
  .col-lg-9  { width:75%; }      .col-lg-10 { width:83.3333%; }
  .col-lg-11 { width:91.6667%; } .col-lg-12 { width:100%; }
}
@media (min-width: 1200px){
  .col-xl-1  { width:8.3333%; }  .col-xl-2  { width:16.6667%; }
  .col-xl-3  { width:25%; }      .col-xl-4  { width:33.3333%; }
  .col-xl-5  { width:41.6667%; } .col-xl-6  { width:50%; }
  .col-xl-7  { width:58.3333%; } .col-xl-8  { width:66.6667%; }
  .col-xl-9  { width:75%; }      .col-xl-10 { width:83.3333%; }
  .col-xl-11 { width:91.6667%; } .col-xl-12 { width:100%; }
}
@media (min-width: 1400px){
  .col-xxl-1  { width:8.3333%; }  .col-xxl-2  { width:16.6667%; }
  .col-xxl-3  { width:25%; }      .col-xxl-4  { width:33.3333%; }
  .col-xxl-5  { width:41.6667%; } .col-xxl-6  { width:50%; }
  .col-xxl-7  { width:58.3333%; } .col-xxl-8  { width:66.6667%; }
  .col-xxl-9  { width:75%; }      .col-xxl-10 { width:83.3333%; }
  .col-xxl-11 { width:91.6667%; } .col-xxl-12 { width:100%; }
}

/* Gutters */
.g-0 { --gutter-x:0; --gutter-y:0; }
.g-1 { --gutter-x:.25rem; --gutter-y:.25rem; }
.g-2 { --gutter-x:.5rem;  --gutter-y:.5rem;  }
.g-3 { --gutter-x:1rem;   --gutter-y:1rem;   }
.g-4 { --gutter-x:2.5rem;   --gutter-y:2.5rem;   }
.g-5 { --gutter-x:3rem;   --gutter-y:3rem;   }

@media (max-width: 575.98px){
.g-4 {
  --gutter-x: 1.5rem;
  --gutter-y: 2rem;
  }
}

/* Masonry layout overrides: JS handles placement, CSS supplies base gaps */
[data-masonry-grid]{
  --masonry-gap-x: var(--row-base-gutter-x);
  --masonry-gap-y: var(--row-base-gutter-y);
}

[data-masonry-grid].is-masonry{
  --row-gutter-x: 0;
  --row-gutter-y: 0;
}

/* ===== Responsive font-size steps ===== */
@media (min-width: 576px){
  :root{
  --fs-sm: 0.90em;
  --fs-lg: 1.15em;
  --fs-xl: 1.20em;
  --fs-xxl: 1.90em;
  }
}
@media (min-width: 768px){
  :root{
    --fs-sm: 0.90em;
    --fs-lg: .9em;
    --fs-xl: 1em;
    --fs-xxl: 1.80em;
  }
}
@media (min-width: 992px){
  :root{
    --fs-sm: 0.90em;
    --fs-lg: 1.10em;
    --fs-xl: 1.20em;
    --fs-xxl: 1.80em;
  }
}
@media (min-width: 1200px){
  :root{
    --fs-sm: 0.90em;
    --fs-lg: 1.10em;
    --fs-xl: 1.20em;
    --fs-xxl: 1.80em;
  }
}
@media (min-width: 1400px){
  :root{
    --fs-sm: 0.90em;
    --fs-lg: 1.10em;
    --fs-xl: 1.20em;
    --fs-xxl: 1.65em;
  }
}
@media (min-width: 1600px){
  :root{
    --fs-sm: 1em;
    --fs-lg: 1.20em;
    --fs-xl: 1.40em;
    --fs-xxl: 1.75em;
  }
}