/**
 * AWP PrintWise — akışkan responsive yerleşim katmanı.
 *
 * Cihaz modeline değil, hesaplama modülünün gerçek kullanılabilir genişliğine
 * göre çalışır. Classic/commerce, normal/hi-DPI ve tema yan sütunlarında aynı
 * davranışı sağlar. Yapısal kurallar modül CSS'lerinden sonra yüklenir.
 */

/* Her aktif hesaplama yüzeyi kendi responsive kapsayıcısıdır. */
#awp-printwise-root .calculator-tab-content,
#awp-printwise-root.awp-form-engine-page {
  container-type: inline-size;
  container-name: awp-module;
}

/* Grid/flex çocuklarının içerik genişliği yüzünden ebeveyni taşırmasını önle. */
#awp-printwise-root
  :is(
    .module-ders-notu,
    .module-rulo-baski,
    .module-dijital-baski,
    .module-katalog,
    .awp-fe-layout,
    .module-ders-notu-left-col,
    .module-rulo-baski-left-col,
    .module-dijital-baski-left-col,
    .module-katalog-left-col,
    .awp-fe-layout__main,
    .module-ders-notu-form-row,
    .module-rulo-baski-form-row,
    .module-dijital-baski-form-row,
    .module-katalog-form-row,
    .awp-fe-layout__form-row,
    .module-ders-notu-fields,
    .module-rulo-baski-fields,
    .module-dijital-baski-fields,
    .module-katalog-fields,
    .awp-fe-layout__fields
  ) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#awp-printwise-root
  :is(
    input,
    select,
    textarea,
    button,
    img,
    svg,
    .awp-select,
    .input-shared,
    .awp-form-input
  ) {
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * Ana modül navigasyonu calculator-tab-content dışında kaldığı için viewport
 * yedeği kullanır. Ara genişlikte kartlar sığdığı kadar sütuna doğal sarılır.
 */
@media (min-width: 641px) and (max-width: 1180px) {
  #awp-printwise-root
    .calculator-tabs-grid:not([data-subtype-grid="true"]) {
    grid-template-columns:
      repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
    height: auto !important;
  }

  #awp-printwise-root
    .calculator-tabs-grid:not([data-subtype-grid="true"])
    .calculator-tab-text-line {
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* Geniş masaüstünden ara monitörlere kesintisiz küçülen sütunlar. */
@container awp-module (min-width: 1181px) and (max-width: 1500px) {
  #awp-printwise-root
    :is(
      .module-ders-notu,
      .module-rulo-baski,
      .module-dijital-baski,
      .module-katalog
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, clamp(280px, 25cqw, 370px)) !important;
    gap: clamp(14px, 1.5cqw, 22px) !important;
  }

  /* Tüm formlar: görsel kartı 350px — sütun/kart eşit, form kalanı doldurur */
  #awp-printwise-root
    :is(
      .module-ders-notu-form-row,
      .module-rulo-baski-form-row,
      .module-dijital-baski-form-row,
      .module-katalog-form-row
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__form-row {
    grid-template-columns: 350px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #awp-printwise-root
    :is(
      .module-ders-notu-form-row .module-ders-notu-image,
      .module-rulo-baski-form-row .module-rulo-baski-image,
      .module-katalog-form-row .module-katalog-image,
      .module-dijital-baski-form-row .module-dijital-baski-image-col,
      .module-dijital-baski-form-row .module-dijital-baski-image,
      .module-dijital-baski-form-row #dijital-product-image-wrap
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__visual-column {
    --awp-fe-visual-col: 350px;
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__visual,
  #awp-printwise-root.awp-form-engine-page .awp-fe-product-visual-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__fields,
  #awp-printwise-root.awp-form-engine-page .awp-fe-fields-panel,
  #awp-printwise-root.awp-form-engine-page .awp-fe-fields-mount {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #awp-printwise-root
    :is(
      .module-ders-notu-summary,
      .module-rulo-baski-summary,
      .module-dijital-baski-summary,
      .module-katalog-summary
    ),
  #awp-printwise-root
    .calculator-tab-content
    :is(
      .module-ders-notu-summary,
      .module-rulo-baski-summary,
      .module-dijital-baski-summary,
      .module-katalog-summary
    ),
  #awp-printwise-root.awp-form-engine-page
    .awp-fe-summary.module-ders-notu-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 370px !important;
  }
}

/*
 * Ara monitör / dar pencere: fiyat paneli formun altına iner; görsel ve form
 * yeterli alan olduğu sürece yan yana kalır. Böylece tablet breakpoint'ine
 * kadar orta form ezilmez.
 */
@container awp-module (max-width: 1180px) {
  #awp-printwise-root
    :is(
      .module-ders-notu,
      .module-rulo-baski,
      .module-dijital-baski,
      .module-katalog
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "left_col"
      "summary" !important;
    gap: clamp(14px, 2cqw, 22px) !important;
  }

  #awp-printwise-root
    :is(
      .module-ders-notu-summary,
      .module-rulo-baski-summary,
      .module-dijital-baski-summary,
      .module-katalog-summary
    ),
  #awp-printwise-root
    .calculator-tab-content
    :is(
      .module-ders-notu-summary,
      .module-rulo-baski-summary,
      .module-dijital-baski-summary,
      .module-katalog-summary
    ),
  #awp-printwise-root.awp-form-engine-page
    .awp-fe-summary.module-ders-notu-summary {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #awp-printwise-root
    :is(
      .module-ders-notu-form-row,
      .module-rulo-baski-form-row,
      .module-dijital-baski-form-row,
      .module-katalog-form-row
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__form-row {
    grid-template-columns: 350px minmax(0, 1fr) !important;
    grid-template-areas: "image form" !important;
    gap: 12px !important;
  }

  #awp-printwise-root
    :is(
      .module-ders-notu-form-row .module-ders-notu-image,
      .module-rulo-baski-form-row .module-rulo-baski-image,
      .module-katalog-form-row .module-katalog-image,
      .module-dijital-baski-form-row .module-dijital-baski-image-col,
      .module-dijital-baski-form-row .module-dijital-baski-image,
      .module-dijital-baski-form-row #dijital-product-image-wrap
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__visual-column {
    --awp-fe-visual-col: 350px;
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__visual,
  #awp-printwise-root.awp-form-engine-page .awp-fe-product-visual-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__fields,
  #awp-printwise-root.awp-form-engine-page .awp-fe-fields-panel,
  #awp-printwise-root.awp-form-engine-page .awp-fe-fields-mount {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Alt tür butonları içerik sığdığı kadar sütun oluşturur, kırılmaz. */
  #awp-printwise-root
    .calculator-tabs-grid[data-subtype-grid="true"] {
    grid-template-columns:
      repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
    height: auto !important;
  }
}

/* Dar tablet / tema yan sütunu: görsel de formun üstüne geçer. */
@container awp-module (max-width: 900px) {
  #awp-printwise-root
    :is(
      .module-ders-notu-form-row,
      .module-rulo-baski-form-row,
      .module-dijital-baski-form-row,
      .module-katalog-form-row
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__form-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "image"
      "form" !important;
  }

  #awp-printwise-root
    :is(
      .module-ders-notu-form-row .module-ders-notu-image,
      .module-rulo-baski-form-row .module-rulo-baski-image,
      .module-dijital-baski-form-row .module-dijital-baski-image,
      .module-katalog-form-row .module-katalog-image
    ),
  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__visual-column {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Tabela seçenekleri, uzun çevirilerde gerçek genişliğe göre 2/3 sütun olur. */
  #awp-printwise-root .awp-tabela-options-grid {
    grid-template-columns:
      repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  }
}

/* Mobil ve çok dar gömülü alanlar. */
@container awp-module (max-width: 640px) {
  #awp-printwise-root
    :is(
      .module-ders-notu-bottom,
      .module-rulo-baski-bottom,
      .module-dijital-baski-bottom,
      .module-katalog-bottom,
      .awp-fe-layout__bottom,
      .awp-form-bottom-grid
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #awp-printwise-root .awp-tabela-options-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #awp-printwise-root
    .calculator-tabs-grid[data-subtype-grid="true"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/*
 * Container query desteklemeyen eski tarayıcılar için güvenli viewport
 * yedeği. Modern tarayıcılarda üstteki gerçek kapsayıcı ölçümü kullanılır.
 */
@supports not (container-type: inline-size) {
  @media (max-width: 1220px) {
    #awp-printwise-root
      :is(
        .module-ders-notu,
        .module-rulo-baski,
        .module-dijital-baski,
        .module-katalog,
        .awp-fe-layout
      ) {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-areas:
        "left_col"
        "summary" !important;
    }

    #awp-printwise-root
      :is(
        .module-ders-notu-summary,
        .module-rulo-baski-summary,
        .module-dijital-baski-summary,
        .module-katalog-summary,
        .awp-fe-summary
      ) {
      position: static !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
    }
  }
}

/*
 * FE / WC ürün formu — son kilit (viewport):
 * Görsel sütun + kart = 350px (dijital ile aynı), gap 12px,
 * form kutusu kalan genişliği tamamen doldurur.
 * compact / commerce küçültmelerinden sonra yüklenir.
 */
@media (min-width: 901px) {
  #awp-printwise-root.awp-form-engine-page,
  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page,
  #awp-printwise-root.awp-form-engine-page.awp-compact-hi-dpi {
    --awp-fe-visual-col: 350px;
    --awp-fe-form-row-gap: 12px;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__form-row,
  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-layout__form-row,
  #awp-printwise-root.awp-form-engine-page.awp-compact-hi-dpi .awp-fe-layout__form-row {
    grid-template-columns: 350px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__visual-column,
  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-layout__visual-column,
  #awp-printwise-root.awp-form-engine-page.awp-compact-hi-dpi .awp-fe-layout__visual-column {
    --awp-fe-visual-col: 350px;
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__visual,
  #awp-printwise-root.awp-form-engine-page .awp-fe-product-visual-card,
  #awp-printwise-root[data-layout-preset="commerce"].awp-form-engine-page .awp-fe-product-visual-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-layout__fields,
  #awp-printwise-root.awp-form-engine-page .awp-fe-fields-panel,
  #awp-printwise-root.awp-form-engine-page .awp-fe-fields-mount,
  #awp-printwise-root.awp-form-engine-page .awp-fe-field,
  #awp-printwise-root.awp-form-engine-page .awp-fe-card-grid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  #awp-printwise-root.awp-form-engine-page .awp-fe-card-btn {
    flex: 1 1 calc(25% - 9px) !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}