/* =========================================================
   TERSA LAYOUT FOUNDATION V2
   File: assets/css/layout.css
   Svrha: globalni raspored, wrapperi, grid i utility layout klase
   Napomena: bez page-specific dizajna
   ========================================================= */

/* =========================
   Global page shell
   ========================= */
   html,
   body {
     min-height: 100%;
   }
   
   body {
     display: flex;
     flex-direction: column;
   }
   
   .site {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
   }
   
   .site-main {
     flex: 1 0 auto;
     width: 100%;
     min-width: 0;
   }
   
   .site-footer {
     margin-top: auto;
   }
   
   /* =========================
      Core wrappers
      ========================= */
   .container,
   .container--narrow,
   .container--wide,
   .page-shell,
   .content-shell,
   .shop-shell,
   .product-shell,
   .cart-shell,
   .checkout-shell {
     width: min(100% - (var(--gutter) * 2), var(--container));
     margin-inline: auto;
   }
   
   .container--narrow,
   .content-shell {
     width: min(100% - (var(--gutter) * 2), var(--container-narrow));
   }
   
   .container--wide {
     width: min(100% - (var(--gutter) * 2), var(--container-wide));
   }
   
   .section + .section {
     padding-top: 0;
   }
   
   /* =========================
      Generic page spacing
      ========================= */
   .page-spacing {
     padding-block: clamp(32px, 5vw, 72px);
   }
   
   .page-spacing--sm {
     padding-block: clamp(24px, 4vw, 48px);
   }
   
   .page-spacing--lg {
     padding-block: clamp(48px, 7vw, 96px);
   }
   
   /* =========================
      Content width helpers
      ========================= */
   .measure {
     max-width: var(--content-measure);
   }
   
   .measure--wide {
     max-width: var(--content-measure-wide);
   }
   
   .measure--narrow {
     max-width: var(--content-measure-narrow);
   }
   
   /* =========================
      Flow / Stack
      ========================= */
   .flow > * + * {
     margin-top: var(--flow-space, var(--sp-16));
   }
   
   .flow--sm {
     --flow-space: var(--sp-12);
   }
   
   .flow--md {
     --flow-space: var(--sp-16);
   }
   
   .flow--lg {
     --flow-space: var(--sp-24);
   }
   
   .flow--xl {
     --flow-space: var(--sp-32);
   }
   
   .stack {
     display: flex;
     flex-direction: column;
     gap: var(--stack-space, var(--sp-16));
   }
   
   .stack--sm {
     --stack-space: var(--sp-12);
   }
   
   .stack--md {
     --stack-space: var(--sp-16);
   }
   
   .stack--lg {
     --stack-space: var(--sp-24);
   }
   
   .stack--xl {
     --stack-space: var(--sp-32);
   }
   
   .stack--2xl {
     --stack-space: var(--sp-48);
   }
   
   /* =========================
      Inline helpers
      ========================= */
   .cluster {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--cluster-gap, var(--sp-12));
   }
   
   .cluster--sm {
     --cluster-gap: var(--sp-8);
   }
   
   .cluster--md {
     --cluster-gap: var(--sp-12);
   }
   
   .cluster--lg {
     --cluster-gap: var(--sp-16);
   }
   
   .cluster--xl {
     --cluster-gap: var(--sp-24);
   }
   
   .cluster--between {
     justify-content: space-between;
   }
   
   .cluster--center {
     justify-content: center;
   }
   
   .cluster--end {
     justify-content: flex-end;
   }
   
   /* =========================
      Split / two-column helper
      ========================= */
   .split {
     display: flex;
     flex-wrap: wrap;
     align-items: var(--split-align, center);
     justify-content: space-between;
     gap: var(--split-gap, var(--sp-24));
   }
   
   .split > * {
     flex: 1 1 280px;
     min-width: 0;
   }
   
   .split--top {
     --split-align: flex-start;
   }
   
   .split--center {
     --split-align: center;
   }
   
   .split--bottom {
     --split-align: flex-end;
   }
   
   /* =========================
      Auto grid
      ========================= */
   .grid {
     display: grid;
     gap: var(--grid-gap, var(--sp-24));
   }
   
   .grid--sm {
     --grid-gap: var(--sp-16);
   }
   
   .grid--md {
     --grid-gap: var(--sp-24);
   }
   
   .grid--lg {
     --grid-gap: var(--sp-32);
   }
   
   .grid--2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   
   .grid--3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   
   .grid--4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   
   .grid--auto {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--product-card-min)), 1fr));
   }
   
   .grid--cards {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
   }
   
   .grid--products {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--product-card-min)), 1fr));
   }
   
   /* =========================
      Sidebar pattern
      ========================= */
   .sidebar {
     display: grid;
     grid-template-columns: minmax(var(--sidebar-width-sm), var(--sidebar-width-lg)) minmax(0, 1fr);
     gap: clamp(24px, 3vw, 40px);
     align-items: start;
   }
   
   .sidebar--right {
     grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-width-sm), var(--sidebar-width-lg));
   }
   
   .sidebar__aside,
   .sidebar__content {
     min-width: 0;
   }
   
   /* =========================
      Switcher pattern
      ========================= */
      .switcher {
        --_switcher-target: var(--switcher-target, 320px);
        --_switcher-min: var(--switcher-min, 260px);
        display: flex;
        flex-wrap: wrap;
        gap: var(--switcher-gap, var(--sp-24));
      }
      
      .switcher > * {
        flex-grow: 1;
        flex-basis: calc((var(--_switcher-target) - 100%) * 999);
        min-width: min(100%, var(--_switcher-min));
      }
   
   /* =========================
      Cover / hero helper
      ========================= */
   .cover {
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-height: var(--cover-min);
     padding-block: clamp(56px, 8vw, 120px);
   }
   
   .cover--sm {
     min-height: var(--cover-min-sm);
   }
   
   .cover--lg {
     min-height: var(--cover-min-lg);
   }
   
   /* =========================
      Alignment helpers
      ========================= */
   .center {
     margin-inline: auto;
   }
   
   .text-center {
     text-align: center;
   }
   
   .text-left {
     text-align: left;
   }
   
   .text-right {
     text-align: right;
   }
   
   .self-start {
     align-self: flex-start;
   }
   
   .self-center {
     align-self: center;
   }
   
   .self-end {
     align-self: flex-end;
   }
   
   /* =========================
      Surface spacing helpers
      ========================= */
   .pad-sm {
     padding: var(--sp-16);
   }
   
   .pad-md {
     padding: var(--sp-24);
   }
   
   .pad-lg {
     padding: var(--sp-32);
   }
   
   .pad-xl {
     padding: clamp(24px, 4vw, 40px);
   }
   
   /* =========================
      Page header / intro blocks
      ========================= */
   .page-header,
   .archive-header,
   .section-header,
   .block-header {
     display: grid;
     gap: var(--sp-12);
     margin-bottom: clamp(24px, 4vw, 40px);
   }
   
   .page-header--center,
   .section-header--center {
     justify-items: center;
     text-align: center;
   }
   
   .page-kicker,
   .section-kicker,
   .eyebrow {
     display: inline-block;
     margin-bottom: var(--sp-8);
     font-size: var(--fs-14);
     font-weight: var(--fw-600);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--c-accent);
   }
   
   /* =========================
      Main content wrappers
      ========================= */
   .entry-layout,
   .default-page-layout {
     padding-block: clamp(32px, 5vw, 72px);
   }
   
   .entry-content,
   .page-content {
     width: min(100%, var(--content-measure-wide));
   }
   
   .entry-content > * + *,
   .page-content > * + * {
     margin-top: var(--sp-20);
   }
   
   /* =========================
      Basic media layout safety
      ========================= */
   .media,
   .media img,
   .media video,
   .media iframe {
     width: 100%;
   }
   
   .ratio-box {
     position: relative;
     overflow: hidden;
   }
   
   .ratio-box--square {
     aspect-ratio: 1 / 1;
   }
   
   .ratio-box--portrait {
     aspect-ratio: 4 / 5;
   }
   
   .ratio-box--landscape {
     aspect-ratio: 16 / 10;
   }
   
   .ratio-box > img,
   .ratio-box > picture,
   .ratio-box > video,
   .ratio-box > iframe {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   /* =========================
      WooCommerce global wrappers
      ========================= */
   .woocommerce .site-main,
   .woocommerce-page .site-main {
     width: 100%;
   }
   
   .woocommerce-page .entry-content,
   .woocommerce-page .page-content,
   .woocommerce .entry-content,
   .woocommerce .page-content {
     width: 100%;
     max-width: none;
   }
   
   .woocommerce-page .woocommerce,
   .woocommerce .woocommerce {
     width: min(100% - (var(--gutter) * 2), var(--container));
     margin-inline: auto;
   }
   
   .woocommerce-page .woocommerce:where(:not(.cart):not(.checkout)),
   .woocommerce .woocommerce:where(:not(.cart):not(.checkout)) {
     padding-block: clamp(32px, 5vw, 72px);
   }
   
   /* =========================
      Archive / shop foundation
      ========================= */
   .shop-layout,
   .archive-layout {
     display: grid;
     grid-template-columns: minmax(var(--sidebar-width-sm), var(--sidebar-width)) minmax(0, 1fr);
     gap: clamp(24px, 3vw, 40px);
     align-items: start;
   }
   
   .shop-layout__aside,
   .shop-layout__main,
   .archive-layout__aside,
   .archive-layout__main {
     min-width: 0;
   }
   
   .shop-toolbar,
   .archive-toolbar {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: var(--sp-16);
     margin-bottom: clamp(20px, 3vw, 32px);
   }
   
   /* =========================
      Product page foundation
      ========================= */
   .product-layout,
   .single-product-layout {
     display: grid;
     grid-template-columns: minmax(0, 1.1fr) minmax(var(--summary-width-sm), 0.9fr);
     gap: clamp(24px, 4vw, 56px);
     align-items: start;
   }
   
   .product-layout__gallery,
   .product-layout__summary,
   .single-product-layout__gallery,
   .single-product-layout__summary {
     min-width: 0;
   }
   
   .product-summary-stack {
     display: grid;
     gap: var(--sp-20);
   }
   
   .product-meta-row {
     display: flex;
     flex-wrap: wrap;
     gap: var(--sp-12);
     align-items: center;
   }
   
   .product-actions {
     display: grid;
     gap: var(--sp-16);
   }
   
   /* =========================
      Cart / checkout foundation
      ========================= */
   .cart-layout,
   .checkout-layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(var(--summary-width-sm), var(--summary-width));
     gap: clamp(24px, 4vw, 48px);
     align-items: start;
   }
   
   .cart-layout__main,
   .cart-layout__aside,
   .checkout-layout__main,
   .checkout-layout__aside {
     min-width: 0;
   }
   
   .order-summary,
   .cart-summary,
   .checkout-summary {
     position: sticky;
     top: var(--sticky-offset);
   }
   
   /* =========================
      Tables / overflow safety
      ========================= */
   .table-wrap {
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
   }
   
   .table-wrap table {
     min-width: var(--table-min-width);
   }
   
   /* =========================
      Spacer helpers
      ========================= */
   .mt-0 { margin-top: 0 !important; }
   .mb-0 { margin-bottom: 0 !important; }
   
   .mt-sm { margin-top: var(--sp-12) !important; }
   .mt-md { margin-top: var(--sp-16) !important; }
   .mt-lg { margin-top: var(--sp-24) !important; }
   .mt-xl { margin-top: var(--sp-32) !important; }
   
   .mb-sm { margin-bottom: var(--sp-12) !important; }
   .mb-md { margin-bottom: var(--sp-16) !important; }
   .mb-lg { margin-bottom: var(--sp-24) !important; }
   .mb-xl { margin-bottom: var(--sp-32) !important; }
   
   /* =========================
      Accessibility / overflow guards
      ========================= */
  /*
   main,
   section,
   article,
   aside,
   header,
   footer {
     min-width: 0;
   }
  */
      
   main,
   section,
   article,
   aside,
   header,
   footer {
     min-width: 0;
   }
   
   :is(h1, h2, h3, h4, h5, h6, p, li, a, span) {
     overflow-wrap: break-word;
   }
   
   /* =========================
      Responsive
      ========================= */
   @media (max-width: 1100px) {
     .grid--4 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   
     .product-layout,
     .single-product-layout,
     .cart-layout,
     .checkout-layout,
     .shop-layout,
     .archive-layout,
     .sidebar,
     .sidebar--right {
       grid-template-columns: 1fr;
     }
   
     .order-summary,
     .cart-summary,
     .checkout-summary {
       position: static;
       top: auto;
     }
   }
   
   @media (max-width: 820px) {
     .grid--3,
     .grid--4,
     .grid--2 {
       grid-template-columns: 1fr;
     }
   
     .container,
     .container--narrow,
     .container--wide,
     .page-shell,
     .content-shell,
     .shop-shell,
     .product-shell,
     .cart-shell,
     .checkout-shell,
     .woocommerce-page .woocommerce,
     .woocommerce .woocommerce {
       width: min(100% - (var(--gutter) * 2), 100%);
     }
   
     .shop-toolbar,
     .archive-toolbar,
     .split {
       align-items: flex-start;
     }
   }
   
   @media (max-width: 640px) {
     .cover {
       min-height: auto;
       padding-block: clamp(40px, 8vw, 72px);
     }
   
     .pad-lg,
     .pad-xl {
       padding: var(--sp-24);
     }
   
     .btn,
     button.button,
     a.button,
     input[type="submit"],
     input[type="button"] {
       width: 100%;
     }
   }