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

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

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

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

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

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

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

/* Usage - Column count utilities */
/* 
<div class="qw-grid qw-cols-2 qw-cols-d-5">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>
*/

/* Card groups
Feature lists
Pricing blocks */
/* i.e. Components layout */

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

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--qw-gap, 1.5rem);
}

/* components */
.qw-card {
    display: grid;
    /* grid-template-columns: 2fr 1fr; */
    grid-template-columns: var(--content-fr, 2fr) var(--media-fr, 1fr);

    /* content | media */
    grid-template-areas: "content media";
    border-radius: 15px;
    overflow: hidden;
    background: var(--qw-card-bg, transparent);
}

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

.qw-card__media {
  grid-area: media;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 15px;
}

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

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

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

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


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

.qw-card--60-40 {
  --content-fr: 3fr;
  --media-fr: 2fr;
}

.qw-card--30-70 {
  --content-fr: 3fr;
  --media-fr: 7fr;
}


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

/* Breakout effect */

/* Optional breakout card effect */
.qw-card--media-breakout .qw-card__media {
  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 */
.qw-card-ltr--media-breakout .qw-card__media {
  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;
}

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

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

.qw-card--media-proportionate .qw-card__media{
  aspect-ratio: 3 / 4;
  width: 100%;
  height: auto;
}

.qw-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 */
.qw-item-text {
  grid-area: text;
  margin: 0;
}

/* Icon (background-image) */
.qw-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;
}

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



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

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

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

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

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

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

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

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

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

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

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


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

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