/* =====================================================
   QW CSS GRID SYSTEM (Webflow breakpoints, mobile-first)
   ===================================================== */

/* ---------------------
   Grid container
--------------------- */

/* Page structure
Section layout
Column math */
/* i.e.  page structure */
.g-grid {
  --g-columns: 12;
  --g-gap: 1.5rem;

  display: grid;
  grid-template-columns: repeat(var(--g-columns), minmax(0, 1fr));
  gap: var(--g-gap);
}

.g-grid-flex {
  display: grid;
  grid-template-columns: var(--content-fr, 2fr) var(--sub-fr, 1fr);
  gap: var(--g-gap, 1.5rem);
}

/* Optional gap utilities */
.g-gap-0 { --g-gap: 0; }
.g-gap-1 { --g-gap: 0.5rem; }
.g-gap-2 { --g-gap: 1rem; }
.g-gap-3 { --g-gap: 1.5rem; }
.g-gap-4 { --g-gap: 2rem; }

/* Column count utilities */
.g-cols-1 { --g-columns: 1; }
.g-cols-2 { --g-columns: 2; }
.g-cols-3 { --g-columns: 3; }
.g-cols-4 { --g-columns: 4; }
.g-cols-5 { --g-columns: 5; }
.g-cols-6 { --g-columns: 6; }

/* Desktop ≥ 992px */
@media (min-width: 992px) {
  .g-cols-d-1 { --g-columns: 1; }
  .g-cols-d-2 { --g-columns: 2; }
  .g-cols-d-3 { --g-columns: 3; }
  .g-cols-d-4 { --g-columns: 4; }
  .g-cols-d-5 { --g-columns: 5; }
}

.content-fr-1 {--content-fr: 1fr;}
.content-fr-2 {--content-fr: 2fr;}
.content-fr-3 {--content-fr: 3fr;}
.content-fr-4 {--content-fr: 4fr;}
.content-fr-5 {--content-fr: 5fr;}
.content-fr-6 {--content-fr: 6fr;}
.content-fr-7 {--content-fr: 7fr;}
.content-fr-8 {--content-fr: 8fr;}
.content-fr-9 {--content-fr: 9fr;}

.sub-fr-1 {--sub-fr: 1fr;}
.sub-fr-2 {--sub-fr: 2fr;}
.sub-fr-3 {--sub-fr: 3fr;}
.sub-fr-4 {--sub-fr: 4fr;}
.sub-fr-5 {--sub-fr: 5fr;}
.sub-fr-6 {--sub-fr: 6fr;}
.sub-fr-7 {--sub-fr: 7fr;}
.sub-fr-8 {--sub-fr: 8fr;}
.sub-fr-9 {--sub-fr: 9fr;}
/* Usage - Column count utilities */
/* 
<div class="g-grid g-cols-2 g-cols-d-5">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
*/

/* ---------------------
   Auto Grid System
--------------------- */

.g-grid-auto {
  --g-gap: 1.5rem;

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-gap, 1.5rem);
}

@media (min-width: 480px) {
  .g-grid-auto {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .g-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

/* ---------------------
   Card Grid System
--------------------- */

/* Card groups
Feature lists
Pricing blocks */
/* i.e. Components layout */
/* components */
.g-card {
  display: grid;
  grid-template-columns: var(--content-fr, 2fr) var(--sub-fr, 1fr);
  gap: var(--g-gap, 1.5rem);
  /* content | sub */
  grid-template-areas: "content sub";
  border-radius: 15px;
  background: var(--g-card-bg, transparent);
}

.g-card__content {
  grid-area: content;
  padding: 2rem;
}

.g-card__sub {
  grid-area: sub;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
}

/* .g-card--70-30 { grid-template-columns: 7fr 3fr; }

.g-card--60-40 { grid-template-columns: 3fr 2fr; }

.g-card--50-50 { grid-template-columns: 1fr 1fr; } */

.g-card--ltr {
  grid-template-columns: var(--sub-fr, 1fr) var(--content-fr, 2fr);
  grid-template-areas: "sub content";
}


/* Flexible Implementation */
.g-card--70-30 {
  --content-fr: 7fr;
  --sub-fr: 3fr;
}

.g-card--60-40 {
  --content-fr: 3fr;
  --sub-fr: 2fr;
}

.g-card--30-70 {
  --content-fr: 3fr;
  --sub-fr: 7fr;
}


@media (max-width: 767px) {
  .g-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content" "sub";
  }
}

/* Breakout effect */

/* Optional breakout card effect */
.g-card--sub-breakout .g-card__sub {
  position: absolute;
  top: 40%;  /* adjust vertical position */
  left: -20%;  /* push outside card */
  width: 100%;  /* larger than normal */
  height: 90%;  /* match desired card height */
  z-index: 1;
}
/* Reversed breakout card effect */
.g-card-ltr--sub-breakout .g-card__sub {
  position: absolute;
  top: 30%;  /* adjust vertical position */
  left: 20%;  /* push outside card */
  width: 100%;  /* larger than normal */
  height: 90%;  /* match desired card height */
  z-index: 1;
}

.g-card--sub-breakout,
.g-card-ltr--sub-breakout {
  position: relative;
  /* needed for absolute child */
  overflow: visible;
  /* allow sub to escape card bounds */
}

@media (max-width: 767px) {
  .g-card--sub-breakout .g-card__sub,
  .g-card-ltr--sub-breakout .g-card__sub {
    position: relative;
    width: 100%;
    height: 200px;
    top: auto;
    left: auto;
  }
}

.g-card--sub-proportionate .g-card__sub{
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
}

.g-item {
  display: grid;
  grid-template-columns: 1fr auto;  /* text | icon */
  grid-template-columns: 1fr max-content;  /* text | icon */
  grid-template-areas: "text icon";
  align-items: center;  /* vertical alignment baseline */
  column-gap: 1rem;
}

/* Text */
.g-item-text {
  grid-area: text;
  margin: 0;
}

/* Icon (background-image) */
.g-item-icon {
  grid-area: icon;
  width: 24px;
  height: 24px;
  background-image: url('../images/arrow-icon.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* This is key */
  align-self: center;
}

.g-item--ltr { grid-template-areas: "icon text"; }



/* ---------------------
   Base column spans (mobile)
--------------------- */
.g-g-col-1 { grid-column: span 1; }
.g-g-col-2 { grid-column: span 2; }
.g-g-col-3 { grid-column: span 3; }
.g-g-col-4 { grid-column: span 4; }
.g-g-col-5 { grid-column: span 5; }
.g-g-col-6 { grid-column: span 6; }
.g-g-col-7 { grid-column: span 7; }
.g-g-col-8 { grid-column: span 8; }
.g-g-col-9 { grid-column: span 9; }
.g-g-col-10 { grid-column: span 10; }
.g-g-col-11 { grid-column: span 11; }
.g-g-col-12 { grid-column: span 12; }

/* =====================================================
   Mobile Landscape ≥ 480px
===================================================== */
@media (min-width: 480px) {
  .g-g-col-ml-1 { grid-column: span 1; }
  .g-g-col-ml-2 { grid-column: span 2; }
  .g-g-col-ml-3 { grid-column: span 3; }
  .g-g-col-ml-4 { grid-column: span 4; }
  .g-g-col-ml-5 { grid-column: span 5; }
  .g-g-col-ml-6 { grid-column: span 6; }
  .g-g-col-ml-7 { grid-column: span 7; }
  .g-g-col-ml-8 { grid-column: span 8; }
  .g-g-col-ml-9 { grid-column: span 9; }
  .g-g-col-ml-10 { grid-column: span 10; }
  .g-g-col-ml-11 { grid-column: span 11; }
  .g-g-col-ml-12 { grid-column: span 12; }
}

/* =====================================================
   Tablet ≥ 768px
===================================================== */
@media (min-width: 768px) {
  .g-g-col-t-1 { grid-column: span 1; }
  .g-g-col-t-2 { grid-column: span 2; }
  .g-g-col-t-3 { grid-column: span 3; }
  .g-g-col-t-4 { grid-column: span 4; }
  .g-g-col-t-5 { grid-column: span 5; }
  .g-g-col-t-6 { grid-column: span 6; }
  .g-g-col-t-7 { grid-column: span 7; }
  .g-g-col-t-8 { grid-column: span 8; }
  .g-g-col-t-9 { grid-column: span 9; }
  .g-g-col-t-10 { grid-column: span 10; }
  .g-g-col-t-11 { grid-column: span 11; }
  .g-g-col-t-12 { grid-column: span 12; }
}

/* =====================================================
   Desktop ≥ 992px
===================================================== */
@media (min-width: 992px) {
  .g-g-col-d-1 { grid-column: span 1; }
  .g-g-col-d-2 { grid-column: span 2; }
  .g-g-col-d-3 { grid-column: span 3; }
  .g-g-col-d-4 { grid-column: span 4; }
  .g-g-col-d-5 { grid-column: span 5; }
  .g-g-col-d-6 { grid-column: span 6; }
  .g-g-col-d-7 { grid-column: span 7; }
  .g-g-col-d-8 { grid-column: span 8; }
  .g-g-col-d-9 { grid-column: span 9; }
  .g-g-col-d-10 { grid-column: span 10; }
  .g-g-col-d-11 { grid-column: span 11; }
  .g-g-col-d-12 { grid-column: span 12; }
}

/* =====================================================
   Large Desktop ≥ 1440px
===================================================== */
@media (min-width: 1440px) {
  .g-g-col-xl-1 { grid-column: span 1; }
  .g-g-col-xl-2 { grid-column: span 2; }
  .g-g-col-xl-3 { grid-column: span 3; }
  .g-g-col-xl-4 { grid-column: span 4; }
  .g-g-col-xl-5 { grid-column: span 5; }
  .g-g-col-xl-6 { grid-column: span 6; }
  .g-g-col-xl-7 { grid-column: span 7; }
  .g-g-col-xl-8 { grid-column: span 8; }
  .g-g-col-xl-9 { grid-column: span 9; }
  .g-g-col-xl-10 { grid-column: span 10; }
  .g-g-col-xl-11 { grid-column: span 11; }
  .g-g-col-xl-12 { grid-column: span 12; }
}

/* ---------------------
   Ordering utilities
--------------------- */
.g-order-1 { order: 1; }
.g-order-2 { order: 2; }
.g-order-3 { order: 3; }

@media (min-width: 768px) {
  .g-order-t-1 { order: 1; }
  .g-order-t-2 { order: 2; }
}

/* ---------------------
   Alignment utilities
--------------------- */
.g-align-start { align-items: start; }
.g-align-center { align-items: center; }
.g-align-end { align-items: end; }

/* Horizontal alignment of all columns */
.g-grid-start { justify-items: start; }
.g-grid-center { justify-items: center; }
.g-grid-end { justify-items: end; }
.g-grid-stretch { justify-items: stretch; }

/* Vertical alignment of all columns */
.g-grid-vstart { align-items: start; }
.g-grid-vcenter { align-items: center; }
.g-grid-vend { align-items: end; }
.g-grid-vstretch { align-items: stretch; }

/* Per-column alignment */
.g-g-col-start { justify-self: start; }
.g-g-col-center { justify-self: center; }
.g-g-col-end { justify-self: end; }
.g-g-col-stretch { justify-self: stretch; }
.g-g-col-vstart { align-self: start; }
.g-g-col-vcenter { align-self: center; }
.g-g-col-vend { align-self: end; }
.g-g-col-vstretch { align-self: stretch; }


/* ****** Usage ****** */

/* <div class="g-grid">
  <div class="g-g-col-12 g-g-col-t-6 g-g-col-d-4">A</div>
  <div class="g-g-col-12 g-g-col-t-6 g-g-col-d-4">B</div>
  <div class="g-g-col-12 g-g-col-d-4">C</div>
</div>
 */