/*
 * RTM Core Grid — mini responsive grid framework
 * -------------------------------------------------------------
 * A small Bootstrap-style 12-column flexbox grid, namespaced with
 * the "rtm-core-" prefix already used elsewhere in this theme
 * (see .rtm-core-grid / .rtm-core-grid-cols-3 in style.css).
 *
 * Usage:
 *   <div class="container">
 *     <div class="rtm-core-row">
 *       <div class="rtm-core-col-12 rtm-core-col-md-6 rtm-core-col-lg-4">...</div>
 *       <div class="rtm-core-col-12 rtm-core-col-md-6 rtm-core-col-lg-8">...</div>
 *     </div>
 *   </div>
 *
 * Breakpoints (min-width, mobile-first — matches common Bootstrap steps):
 *   sm: 576px   md: 768px   lg: 992px   xl: 1200px
 *
 * Reuses the theme's existing .container and .clr classes rather
 * than introducing new ones for those roles.
 * ------------------------------------------------------------- */

:root {
  --rtm-core-gutter: 32px;
  --rtm-core-columns: 12;
}

/* -------------------------------------------------- */
/* Container                                           */
/* Extends the theme's existing .container (style.css  */
/* already sets margin:0 auto; max-width:1140px).       */
/* -------------------------------------------------- */
.container,
.rtm-core-container {
  width: 100%;
  padding-inline: 20px;
  box-sizing: border-box;
}

.rtm-core-container-fluid {
  width: 100%;
  padding-inline: 20px;
  box-sizing: border-box;
}

@media (min-width: 576px) {
  .container,
  .rtm-core-container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container,
  .rtm-core-container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container,
  .rtm-core-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container,
  .rtm-core-container {
    max-width: 1140px;
  }
}

/* -------------------------------------------------- */
/* Row                                                 */
/* -------------------------------------------------- */
.rtm-core-row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--rtm-core-gutter) / -2);
}

.rtm-core-row.rtm-core-no-gutters {
  --rtm-core-gutter: 0px;
}

/* Vertical alignment */
.rtm-core-row--top {
  align-items: flex-start;
}
.rtm-core-row--middle {
  align-items: center;
}
.rtm-core-row--bottom {
  align-items: flex-end;
}

/* Horizontal distribution */
.rtm-core-row--start {
  justify-content: flex-start;
}
.rtm-core-row--center {
  justify-content: center;
}
.rtm-core-row--end {
  justify-content: flex-end;
}
.rtm-core-row--between {
  justify-content: space-between;
}
.rtm-core-row--around {
  justify-content: space-around;
}
.rtm-core-row--evenly {
  justify-content: space-evenly;
}

/* -------------------------------------------------- */
/* Columns                                             */
/* -------------------------------------------------- */
[class*="rtm-core-col"] {
  box-sizing: border-box;
  padding-inline: calc(var(--rtm-core-gutter) / 2);
  width: 100%;
}

/* Equal-width, auto-growing column */
.rtm-core-col {
  flex: 1 0 0%;
}

/* Column that only takes the width of its content */
.rtm-core-col-auto {
  flex: 0 0 auto;
  width: auto;
}

/* Fixed-span columns, 1 through 12, mobile-first (no prefix = all sizes) */
.rtm-core-col-1  { flex: 0 0 auto; width: 8.3333%; }
.rtm-core-col-2  { flex: 0 0 auto; width: 16.6667%; }
.rtm-core-col-3  { flex: 0 0 auto; width: 25%; }
.rtm-core-col-4  { flex: 0 0 auto; width: 33.3333%; }
.rtm-core-col-5  { flex: 0 0 auto; width: 41.6667%; }
.rtm-core-col-6  { flex: 0 0 auto; width: 50%; }
.rtm-core-col-7  { flex: 0 0 auto; width: 58.3333%; }
.rtm-core-col-8  { flex: 0 0 auto; width: 66.6667%; }
.rtm-core-col-9  { flex: 0 0 auto; width: 75%; }
.rtm-core-col-10 { flex: 0 0 auto; width: 83.3333%; }
.rtm-core-col-11 { flex: 0 0 auto; width: 91.6667%; }
.rtm-core-col-12 { flex: 0 0 auto; width: 100%; }

/* Offsets */
.rtm-core-offset-0  { margin-inline-start: 0; }
.rtm-core-offset-1  { margin-inline-start: 8.3333%; }
.rtm-core-offset-2  { margin-inline-start: 16.6667%; }
.rtm-core-offset-3  { margin-inline-start: 25%; }
.rtm-core-offset-4  { margin-inline-start: 33.3333%; }
.rtm-core-offset-5  { margin-inline-start: 41.6667%; }
.rtm-core-offset-6  { margin-inline-start: 50%; }
.rtm-core-offset-7  { margin-inline-start: 58.3333%; }
.rtm-core-offset-8  { margin-inline-start: 66.6667%; }
.rtm-core-offset-9  { margin-inline-start: 75%; }
.rtm-core-offset-10 { margin-inline-start: 83.3333%; }
.rtm-core-offset-11 { margin-inline-start: 91.6667%; }

/* -------------------------------------------------- */
/* Responsive columns / offsets                        */
/* Generated per breakpoint: sm, md, lg, xl             */
/* -------------------------------------------------- */

/* sm: >= 576px */
@media (min-width: 576px) {
  .rtm-core-col-sm         { flex: 1 0 0%; width: auto; }
  .rtm-core-col-sm-auto    { flex: 0 0 auto; width: auto; }
  .rtm-core-col-sm-1       { flex: 0 0 auto; width: 8.3333%; }
  .rtm-core-col-sm-2       { flex: 0 0 auto; width: 16.6667%; }
  .rtm-core-col-sm-3       { flex: 0 0 auto; width: 25%; }
  .rtm-core-col-sm-4       { flex: 0 0 auto; width: 33.3333%; }
  .rtm-core-col-sm-5       { flex: 0 0 auto; width: 41.6667%; }
  .rtm-core-col-sm-6       { flex: 0 0 auto; width: 50%; }
  .rtm-core-col-sm-7       { flex: 0 0 auto; width: 58.3333%; }
  .rtm-core-col-sm-8       { flex: 0 0 auto; width: 66.6667%; }
  .rtm-core-col-sm-9       { flex: 0 0 auto; width: 75%; }
  .rtm-core-col-sm-10      { flex: 0 0 auto; width: 83.3333%; }
  .rtm-core-col-sm-11      { flex: 0 0 auto; width: 91.6667%; }
  .rtm-core-col-sm-12      { flex: 0 0 auto; width: 100%; }
  .rtm-core-offset-sm-0    { margin-inline-start: 0; }
  .rtm-core-offset-sm-1    { margin-inline-start: 8.3333%; }
  .rtm-core-offset-sm-2    { margin-inline-start: 16.6667%; }
  .rtm-core-offset-sm-3    { margin-inline-start: 25%; }
  .rtm-core-offset-sm-4    { margin-inline-start: 33.3333%; }
  .rtm-core-offset-sm-5    { margin-inline-start: 41.6667%; }
  .rtm-core-offset-sm-6    { margin-inline-start: 50%; }
}

/* md: >= 768px */
@media (min-width: 768px) {
  .rtm-core-col-md         { flex: 1 0 0%; width: auto; }
  .rtm-core-col-md-auto    { flex: 0 0 auto; width: auto; }
  .rtm-core-col-md-1       { flex: 0 0 auto; width: 8.3333%; }
  .rtm-core-col-md-2       { flex: 0 0 auto; width: 16.6667%; }
  .rtm-core-col-md-3       { flex: 0 0 auto; width: 25%; }
  .rtm-core-col-md-4       { flex: 0 0 auto; width: 33.3333%; }
  .rtm-core-col-md-5       { flex: 0 0 auto; width: 41.6667%; }
  .rtm-core-col-md-6       { flex: 0 0 auto; width: 50%; }
  .rtm-core-col-md-7       { flex: 0 0 auto; width: 58.3333%; }
  .rtm-core-col-md-8       { flex: 0 0 auto; width: 66.6667%; }
  .rtm-core-col-md-9       { flex: 0 0 auto; width: 75%; }
  .rtm-core-col-md-10      { flex: 0 0 auto; width: 83.3333%; }
  .rtm-core-col-md-11      { flex: 0 0 auto; width: 91.6667%; }
  .rtm-core-col-md-12      { flex: 0 0 auto; width: 100%; }
  .rtm-core-offset-md-0    { margin-inline-start: 0; }
  .rtm-core-offset-md-1    { margin-inline-start: 8.3333%; }
  .rtm-core-offset-md-2    { margin-inline-start: 16.6667%; }
  .rtm-core-offset-md-3    { margin-inline-start: 25%; }
  .rtm-core-offset-md-4    { margin-inline-start: 33.3333%; }
  .rtm-core-offset-md-5    { margin-inline-start: 41.6667%; }
  .rtm-core-offset-md-6    { margin-inline-start: 50%; }
}

/* lg: >= 992px */
@media (min-width: 992px) {
  .rtm-core-col-lg         { flex: 1 0 0%; width: auto; }
  .rtm-core-col-lg-auto    { flex: 0 0 auto; width: auto; }
  .rtm-core-col-lg-1       { flex: 0 0 auto; width: 8.3333%; }
  .rtm-core-col-lg-2       { flex: 0 0 auto; width: 16.6667%; }
  .rtm-core-col-lg-3       { flex: 0 0 auto; width: 25%; }
  .rtm-core-col-lg-4       { flex: 0 0 auto; width: 33.3333%; }
  .rtm-core-col-lg-5       { flex: 0 0 auto; width: 41.6667%; }
  .rtm-core-col-lg-6       { flex: 0 0 auto; width: 50%; }
  .rtm-core-col-lg-7       { flex: 0 0 auto; width: 58.3333%; }
  .rtm-core-col-lg-8       { flex: 0 0 auto; width: 66.6667%; }
  .rtm-core-col-lg-9       { flex: 0 0 auto; width: 75%; }
  .rtm-core-col-lg-10      { flex: 0 0 auto; width: 83.3333%; }
  .rtm-core-col-lg-11      { flex: 0 0 auto; width: 91.6667%; }
  .rtm-core-col-lg-12      { flex: 0 0 auto; width: 100%; }
  .rtm-core-offset-lg-0    { margin-inline-start: 0; }
  .rtm-core-offset-lg-1    { margin-inline-start: 8.3333%; }
  .rtm-core-offset-lg-2    { margin-inline-start: 16.6667%; }
  .rtm-core-offset-lg-3    { margin-inline-start: 25%; }
  .rtm-core-offset-lg-4    { margin-inline-start: 33.3333%; }
  .rtm-core-offset-lg-5    { margin-inline-start: 41.6667%; }
  .rtm-core-offset-lg-6    { margin-inline-start: 50%; }
}

/* xl: >= 1200px */
@media (min-width: 1200px) {
  .rtm-core-col-xl         { flex: 1 0 0%; width: auto; }
  .rtm-core-col-xl-auto    { flex: 0 0 auto; width: auto; }
  .rtm-core-col-xl-1       { flex: 0 0 auto; width: 8.3333%; }
  .rtm-core-col-xl-2       { flex: 0 0 auto; width: 16.6667%; }
  .rtm-core-col-xl-3       { flex: 0 0 auto; width: 25%; }
  .rtm-core-col-xl-4       { flex: 0 0 auto; width: 33.3333%; }
  .rtm-core-col-xl-5       { flex: 0 0 auto; width: 41.6667%; }
  .rtm-core-col-xl-6       { flex: 0 0 auto; width: 50%; }
  .rtm-core-col-xl-7       { flex: 0 0 auto; width: 58.3333%; }
  .rtm-core-col-xl-8       { flex: 0 0 auto; width: 66.6667%; }
  .rtm-core-col-xl-9       { flex: 0 0 auto; width: 75%; }
  .rtm-core-col-xl-10      { flex: 0 0 auto; width: 83.3333%; }
  .rtm-core-col-xl-11      { flex: 0 0 auto; width: 91.6667%; }
  .rtm-core-col-xl-12      { flex: 0 0 auto; width: 100%; }
  .rtm-core-offset-xl-0    { margin-inline-start: 0; }
  .rtm-core-offset-xl-1    { margin-inline-start: 8.3333%; }
  .rtm-core-offset-xl-2    { margin-inline-start: 16.6667%; }
  .rtm-core-offset-xl-3    { margin-inline-start: 25%; }
  .rtm-core-offset-xl-4    { margin-inline-start: 33.3333%; }
  .rtm-core-offset-xl-5    { margin-inline-start: 41.6667%; }
  .rtm-core-offset-xl-6    { margin-inline-start: 50%; }
}

/* -------------------------------------------------- */
/* Display / visibility helpers (handy alongside grid) */
/* -------------------------------------------------- */
.rtm-core-hidden        { display: none !important; }

@media (max-width: 767px) {
  .rtm-core-hidden-xs    { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .rtm-core-hidden-sm    { display: none !important; }
}
@media (min-width: 992px) {
  .rtm-core-hidden-lg-up { display: none !important; }
}