/* =========================================================
   ALPIN WORK — TWO COLUMN LAYOUT (FINAL)
   File: /css/layout/aw-two-col.css

   Purpose:
   - універсальний двоколонковий layout (ліва / права)
   - sticky sidebar тільки на desktop
   - базові змінні + preset-и для сторінок

   Recommended markup:
   <div class="aw-two-col aw-two-col--cases|services">
     <section class="aw-two-col__main">...</section>
     <aside class="aw-two-col__aside">
       <div class="aw-sidebar">...</div>
     </aside>
   </div>
========================================================= */


/* =========================================================
   GLOBAL LAYOUT VARIABLES (SAFE DEFAULTS)
   ========================================================= */
:root{
  /* gap між колонками */
  --aw-two-col-gap: 24px;

  /* ширина sidebar */
  --aw-sidebar-min: 300px;
  --aw-sidebar-max: 360px;

  /* sticky offset під header */
  --aw-sticky-top: 96px;

  /* fallback gap для sidebar stack */
  --aw-sidebar-stack-gap: 16px;
}


/* =========================================================
   CORE GRID (MOBILE FIRST)
   ========================================================= */

.aw-two-col{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--aw-two-col-gap);
  align-items: start;
  min-width: 0;
}

/* main / aside safety */
.aw-two-col__main,
.aw-two-col__aside{
  min-width: 0;
}

/* sidebar wrapper */
.aw-two-col__aside .aw-sidebar{
  position: static; /* mobile: no sticky */
  top: auto;
  min-width: 0;
}

/* sidebar inner spacing (fallback, основне в aw-widgets.css) */
.aw-sidebar__inner{
  display: grid;
  gap: var(--aw-sidebar-stack-gap);
}


/* =========================================================
   BREAKPOINT: DESKTOP (2 COLUMNS)
   ========================================================= */

@media (min-width: 980px){
  .aw-two-col{
    grid-template-columns:
      minmax(0, 1fr)
      minmax(var(--aw-sidebar-min), var(--aw-sidebar-max));
  }

  /* sticky sidebar */
  .aw-two-col__aside .aw-sidebar{
    position: sticky;
    top: var(--aw-sticky-top);
    align-self: start;
  }
}


/* =========================================================
   MODIFIER: NO STICKY
   Usage: .aw-two-col aw-two-col--no-sticky
   ========================================================= */

.aw-two-col--no-sticky .aw-two-col__aside .aw-sidebar{
  position: static !important;
  top: auto !important;
}


/* =========================================================
   PRESET: CASES
   Usage:
   <div class="aw-two-col aw-two-col--cases">
   ========================================================= */

.aw-two-col--cases{
  --aw-sidebar-min: 340px;
  --aw-sidebar-max: 400px;
  --aw-two-col-gap: 28px;
}

@media (min-width: 1280px){
  .aw-two-col--cases{
    --aw-sidebar-min: 360px;
    --aw-sidebar-max: 420px;
    --aw-two-col-gap: 32px;
  }
}


/* =========================================================
   PRESET: SERVICES
   Usage:
   <div class="aw-two-col aw-two-col--services">
   ========================================================= */

.aw-two-col--services{
  --aw-sidebar-min: 300px;
  --aw-sidebar-max: 360px;
  --aw-two-col-gap: 24px;
}

@media (min-width: 1280px){
  .aw-two-col--services{
    --aw-sidebar-min: 320px;
    --aw-sidebar-max: 380px;
    --aw-two-col-gap: 28px;
  }
}