/*
 * Proje: ACIZANE Portal
 * Modül: HDS
 * Dosya: themes/default/assets/css/hds/components/layout-row/base.css
 * Açıklama: LayoutRow (yerleşim satırı): kalıp ızgaraları, sabit yükseklik, hücre / yığın, mobilde alt alta.
 *           Yalnız yerleşim; içindeki bileşenin görünümü kendi dosyasındadır.
 * Sürüm: 1.3.0
 * Oluşturuldu: 02.11.2026
 * Güncellendi: 02.11.2026 · satır görünümü (--look-*: Card kancaları) · elle yükseklik (--height-custom) ve yığın oranları (--hds-layout-stack-rows) · hücre parçası kapsayıcı (hds-cell): içindeki bileşen kutu genişliğine göre uyum sağlar (Card compact / media)
 */

/* ---> LayoutRow */
.hds-layout-row {
    --hds-layout-gap: 1rem;
    --hds-layout-height: auto;
    margin-top: 2rem;
}

.hds-layout-row--gap-lg { --hds-layout-gap: 1.5rem; }

.hds-layout-row--height-s { --hds-layout-height: 12rem; }
.hds-layout-row--height-m { --hds-layout-height: 18rem; }
.hds-layout-row--height-l { --hds-layout-height: 26rem; }
.hds-layout-row--height-xl { --hds-layout-height: 36rem; }
/* Elle ölçü: değer satırın style="--hds-layout-height" kancasından gelir (8–60 rem) */

.hds-layout-row__grid {
    display: grid;
    gap: var(--hds-layout-gap);
    grid-template-columns: var(--hds-layout-columns, minmax(0, 1fr));
}

/* Satır görünümü: yalnız HDS Card kancalarını yazar (kartın görünümü card/base.css'te); kompakt kart kapak oranını kendi değerinde tutar */
.hds-layout-row--look-tone-soft { --hds-card-bg: #f4f5f7; }
.hds-layout-row--look-tone-accent { --hds-card-bg: #eef8fb; --hds-card-border-color: #0f5f73; }
.hds-layout-row--look-border-none { --hds-card-border-width: 0px; }
.hds-layout-row--look-border-strong { --hds-card-border-width: 2px; }
.hds-layout-row--look-shadow-none { --hds-card-shadow: none; }
.hds-layout-row--look-shadow-medium { --hds-card-shadow: 0 4px 14px rgb(15 23 42 / 0.12); }
.hds-layout-row--look-radius-sharp { --hds-card-radius: 3px; }
.hds-layout-row--look-radius-round { --hds-card-radius: 20px; }
.hds-layout-row--look-cover-16-9 { --hds-card-cover-ratio: 16 / 9; }
.hds-layout-row--look-cover-4-3 { --hds-card-cover-ratio: 4 / 3; }
.hds-layout-row--look-cover-1-1 { --hds-card-cover-ratio: 1 / 1; }

/* Başlıktan sonraki ızgara */
.hds-layout-row > .hds-section-header + .hds-layout-row__grid,
.hds-layout-row > .hds-section-header + .hds-carousel,
.hds-layout-row > * + .hds-layout-row__grid { margin-top: 1rem; }
.hds-layout-row > .hds-layout-row__grid:first-child { margin-top: 0; }

/* Kalıplar */
.hds-layout-row__grid--cards { grid-template-columns: var(--hds-layout-columns, repeat(auto-fill, minmax(16rem, 1fr))); }
.hds-layout-row__grid--1-1 { grid-template-columns: var(--hds-layout-columns, repeat(2, minmax(0, 1fr))); }
.hds-layout-row__grid--1-1-1 { grid-template-columns: var(--hds-layout-columns, repeat(3, minmax(0, 1fr))); }
.hds-layout-row__grid--1-1-1-1 { grid-template-columns: var(--hds-layout-columns, repeat(4, minmax(0, 1fr))); }
.hds-layout-row__grid--1-1-1-1-1 { grid-template-columns: var(--hds-layout-columns, repeat(5, minmax(0, 1fr))); }
.hds-layout-row__grid--2-1 { grid-template-columns: var(--hds-layout-columns, minmax(0, 2fr) minmax(0, 1fr)); }
.hds-layout-row__grid--fixed-1 { grid-template-columns: var(--hds-layout-columns, minmax(0, 42rem) minmax(0, 1fr)); }

/* Sabit yükseklik: hücre kendi içinde kırpılır, satır yüksekliği bozulmaz */
.hds-layout-row[class*="--height-"] .hds-layout-row__grid {
    grid-template-rows: minmax(0, var(--hds-layout-height));
    height: var(--hds-layout-height);
}

.hds-layout-row[class*="--height-"] .hds-layout-cell { overflow: hidden; }

/* Hücre */
.hds-layout-cell { display: grid; min-width: 0; grid-column: var(--hds-layout-column, auto); }
.hds-layout-cell__part { min-width: 0; container: hds-cell / inline-size; }
.hds-layout-row--fill .hds-layout-cell__part { display: grid; }

/* Başlıklı hücre (başlık + gövde) */
.hds-layout-cell--headed { align-content: start; gap: 0.75rem; }
.hds-layout-cell__body { display: grid; min-width: 0; }
.hds-layout-cell__body > .hds-layout-cell__part { display: grid; gap: 0.75rem; }

/* Yığın: iki parça alt alta */
.hds-layout-cell--stack { gap: var(--hds-layout-gap); align-content: start; }
.hds-layout-cell--ratio-1-1 { grid-auto-rows: 1fr; align-content: stretch; }
.hds-layout-cell--stack:not(.hds-layout-cell--ratio-auto):not(.hds-layout-cell--ratio-1-1) { grid-template-rows: var(--hds-layout-stack-rows, 1fr 1fr); align-content: stretch; }
.hds-layout-cell--stack > .hds-layout-cell__part { display: grid; }
.hds-layout-cell--stack:not(.hds-layout-cell--ratio-auto) > .hds-layout-cell__part > * { height: 100%; }

/* Dar ekran */
@media (max-width: 64rem) {
    .hds-layout-row__grid--1-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hds-layout-row__grid--1-1-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hds-layout-row__grid--fixed-1 { grid-template-columns: minmax(0, 1fr); }
    .hds-layout-row__grid--fixed-1 > .hds-layout-cell { grid-column: auto; }
}

@media (max-width: 48rem) {
    .hds-layout-row__grid--2-1,
    .hds-layout-row__grid--1-1-1 { grid-template-columns: minmax(0, 1fr); }
    .hds-layout-row__grid > .hds-layout-cell { grid-column: auto; }
    .hds-layout-row[class*="--height-"] .hds-layout-row__grid { grid-template-rows: none; height: auto; }
    .hds-layout-row[class*="--height-"] .hds-layout-cell { overflow: visible; }
}

@media (max-width: 40rem) {
    .hds-layout-row__grid--1-1-1-1,
    .hds-layout-row__grid--1-1-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 28rem) {
    .hds-layout-row__grid--1-1-1-1,
    .hds-layout-row__grid--1-1-1-1-1,
    .hds-layout-row__grid--1-1 { grid-template-columns: minmax(0, 1fr); }
}
/* <--- LayoutRow */