/* ========================================
   TYPO3 Configurable Card - Layout Grid System
   All layout grid definitions (layout-1 to layout-41)
   ======================================== */

/* === 4x1 LAYOUTS === */
/* Layout 1: [Header | Text | Icon | Image] - Horizontal */
.layout-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header text icon image";
    gap: 1rem;
}

/* Layout 2: [Header | Text | Image | Icon] - Horizontal */
.layout-2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header text image icon";
    gap: 1rem;
}

/* Layout 3: [Header | Icon | Text | Image] - Horizontal */
.layout-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header icon text image";
    gap: 1rem;
}

/* Layout 4: [Header | Icon | Image | Text] - Horizontal */
.layout-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header icon image text";
    gap: 1rem;
}

/* Layout 5: [Header | Image | Text | Icon] - Horizontal */
.layout-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header image text icon";
    gap: 1rem;
}

/* Layout 6: [Header | Image | Icon | Text] - Horizontal */
.layout-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "header image icon text";
    gap: 1rem;
}

/* === 2x2 LAYOUTS === */
/* Layout 7: [Header | Text] / [Icon | Image] */
.layout-7 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header text"
        "icon image";
    gap: 1rem;
}

/* Layout 8: [Header | Icon] / [Text | Image] */
.layout-8 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header icon"
        "text image";
    gap: 1rem;
}

/* Layout 9: [Header | Image] / [Text | Icon] */
.layout-9 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header image"
        "text icon";
    gap: 1rem;
}

/* Layout 10: [Text | Header] / [Icon | Image] */
.layout-10 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "text header"
        "icon image";
    gap: 1rem;
}

/* Layout 11: [Icon | Header] / [Text | Image] */
.layout-11 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "icon header"
        "text image";
    gap: 1rem;
}

/* Layout 12: [Image | Header] / [Text | Icon] */
.layout-12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "image header"
        "text icon";
    gap: 1rem;
}

/* === SPANNING LAYOUTS === */
/* Layout 13: [Header Span 2] / [Text | Icon | Image] */
.layout-13 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header header header"
        "text icon image";
    gap: 1rem;
}

/* Layout 14: [Text Span 2] / [Header | Icon | Image] */
.layout-14 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "text text text"
        "header icon image";
    gap: 1rem;
}

/* Layout 15: [Header | Text Span 2] / [Icon | Image] */
.layout-15 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header text"
        "icon image";
    gap: 1rem;
}

/* Layout 16: [Image Span Full] / [Header | Text | Icon] */
.layout-16 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "image image image"
        "header text icon";
    gap: 1rem;
}

/* Layout 17: [Header | Icon] / [Text | Image Span] */
.layout-17 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header icon"
        "text image";
    gap: 1rem;
}

/* === VERTICAL LAYOUTS === */
/* Layout 18: [Header] / [Text] / [Icon] / [Image] - Vertical */
.layout-18 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
        "header"
        "text"
        "icon"
        "image";
    gap: 1rem;
}

/* Layout 19: [Header] / [Icon] / [Text] / [Image] - Vertical */
.layout-19 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
        "header"
        "icon"
        "text"
        "image";
    gap: 1rem;
}

/* Layout 20: [Image] / [Header] / [Text] / [Icon] - Vertical */
.layout-20 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: 
        "image"
        "header"
        "text"
        "icon";
    gap: 1rem;
}

/* === ASYMMETRIC LAYOUTS === */
/* Layout 21: [Header Span 2 | Icon] / [Text | Image] */
.layout-21 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header icon"
        "text image";
    gap: 1rem;
}

/* Layout 22: [Image | Header Span 2] / [Icon | Text] */
.layout-22 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "image header"
        "icon text";
    gap: 1rem;
}

/* Layout 23: [Header] / [Text Span | Icon] / [Image] */
.layout-23 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "header header"
        "text icon"
        "image image";
    gap: 1rem;
}

/* Layout 24: [Header | Text | Icon] / [Image Span 3] */
.layout-24 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "header text icon"
        "image image image";
    gap: 1rem;
}

/* === ADDITIONAL 3-ROW LAYOUTS === */
/* Layout 25: [Image | Icon] / [Header Span] / [Text Span] */
.layout-25 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "image icon"
        "header header"
        "text text";
    gap: 1rem;
}

/* Layout 26: [Icon | Image] / [Header Span] / [Text Span] */
.layout-26 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "icon image"
        "header header"
        "text text";
    gap: 1rem;
}

/* Layout 27: [Text | Icon] / [Header Span] / [Image Span] */
.layout-27 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "text icon"
        "header header"
        "image image";
    gap: 1rem;
}

/* Layout 28: [Icon | Text] / [Header Span] / [Image Span] */
.layout-28 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "icon text"
        "header header"
        "image image";
    gap: 1rem;
}

/* Layout 29: [Text | Image] / [Header Span] / [Icon Span] */
.layout-29 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "text image"
        "header header"
        "icon icon";
    gap: 1rem;
}

/* Layout 30: [Image | Text] / [Header Span] / [Icon Span] */
.layout-30 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "image text"
        "header header"
        "icon icon";
    gap: 1rem;
}

/* Layout 31: [Icon Span] / [Header | Text] / [Image Span] */
.layout-31 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "icon icon"
        "header text"
        "image image";
    gap: 1rem;
}

/* Layout 32: [Icon Span] / [Text | Header] / [Image Span] */
.layout-32 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "icon icon"
        "text header"
        "image image";
    gap: 1rem;
}

/* Layout 33: [Text Span] / [Header | Icon] / [Image Span] */
.layout-33 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "text text"
        "header icon"
        "image image";
    gap: 1rem;
}

/* Layout 34: [Text Span] / [Icon | Header] / [Image Span] */
.layout-34 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "text text"
        "icon header"
        "image image";
    gap: 1rem;
}

/* Layout 35: [Header Span] / [Image | Icon] / [Text Span] */
.layout-35 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "header header"
        "image icon"
        "text text";
    gap: 1rem;
}

/* Layout 36: [Header Span] / [Icon | Image] / [Text Span] */
.layout-36 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "header header"
        "icon image"
        "text text";
    gap: 1rem;
}

/* === MORE COMPLEX 3-ELEMENT SPANNING LAYOUTS === */
/* Layout 37: [Image | Header | Text] / [Icon Span 3] */
.layout-37 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "image header text"
        "icon icon icon";
    gap: 1rem;
}

/* Layout 38: [Icon | Header | Text] / [Image Span 3] */
.layout-38 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "icon header text"
        "image image image";
    gap: 1rem;
}

/* Layout 39: [Text | Header | Icon] / [Image Span 3] */
.layout-39 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "text header icon"
        "image image image";
    gap: 1rem;
}

/* Layout 40: [Text | Header | Image] / [Icon Span 3] */
.layout-40 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: 
        "text header image"
        "icon icon icon";
    gap: 1rem;
}

/* Layout 41: [Header] / [Text] mit Icon und Image über beide Zeilen */
.layout-41 {
    display: grid;
    grid-template-columns: auto min-content 1fr;
    grid-template-rows: auto auto;    
    grid-template-areas: 
        "header icon image"
        "text icon image";
    gap: 1rem;
}

.layout-41 .configurable-card-header { 
    grid-column: 1; 
    grid-row: 1; 
}

.layout-41 .configurable-card-text-content { 
    grid-column: 1; 
    grid-row: 2; 
}

.layout-41 .configurable-card-icon-content { 
    grid-column: 2; 
    grid-row: 1 / span 2; 
}

.layout-41 .configurable-card-image-content { 
    grid-column: 3; 
    grid-row: 1 / span 2; 
}

/* === UNIVERSAL GRID AREA ASSIGNMENTS === */
.layout-1 .configurable-card-header,
.layout-2 .configurable-card-header,
.layout-3 .configurable-card-header,
.layout-4 .configurable-card-header,
.layout-5 .configurable-card-header,
.layout-6 .configurable-card-header,
.layout-7 .configurable-card-header,
.layout-8 .configurable-card-header,
.layout-9 .configurable-card-header,
.layout-10 .configurable-card-header,
.layout-11 .configurable-card-header,
.layout-12 .configurable-card-header,
.layout-13 .configurable-card-header,
.layout-14 .configurable-card-header,
.layout-15 .configurable-card-header,
.layout-16 .configurable-card-header,
.layout-17 .configurable-card-header,
.layout-18 .configurable-card-header,
.layout-19 .configurable-card-header,
.layout-20 .configurable-card-header,
.layout-21 .configurable-card-header,
.layout-22 .configurable-card-header,
.layout-23 .configurable-card-header,
.layout-24 .configurable-card-header,
.layout-25 .configurable-card-header,
.layout-26 .configurable-card-header,
.layout-27 .configurable-card-header,
.layout-28 .configurable-card-header,
.layout-29 .configurable-card-header,
.layout-30 .configurable-card-header,
.layout-31 .configurable-card-header,
.layout-32 .configurable-card-header,
.layout-33 .configurable-card-header,
.layout-34 .configurable-card-header,
.layout-35 .configurable-card-header,
.layout-36 .configurable-card-header,
.layout-37 .configurable-card-header,
.layout-38 .configurable-card-header,
.layout-39 .configurable-card-header,
.layout-40 .configurable-card-header,
.layout-41 .configurable-card-header { 
    grid-area: header; 
}

.layout-1 .configurable-card-text-content,
.layout-2 .configurable-card-text-content,
.layout-3 .configurable-card-text-content,
.layout-4 .configurable-card-text-content,
.layout-5 .configurable-card-text-content,
.layout-6 .configurable-card-text-content,
.layout-7 .configurable-card-text-content,
.layout-8 .configurable-card-text-content,
.layout-9 .configurable-card-text-content,
.layout-10 .configurable-card-text-content,
.layout-11 .configurable-card-text-content,
.layout-12 .configurable-card-text-content,
.layout-13 .configurable-card-text-content,
.layout-14 .configurable-card-text-content,
.layout-15 .configurable-card-text-content,
.layout-16 .configurable-card-text-content,
.layout-17 .configurable-card-text-content,
.layout-18 .configurable-card-text-content,
.layout-19 .configurable-card-text-content,
.layout-20 .configurable-card-text-content,
.layout-21 .configurable-card-text-content,
.layout-22 .configurable-card-text-content,
.layout-23 .configurable-card-text-content,
.layout-24 .configurable-card-text-content,
.layout-25 .configurable-card-text-content,
.layout-26 .configurable-card-text-content,
.layout-27 .configurable-card-text-content,
.layout-28 .configurable-card-text-content,
.layout-29 .configurable-card-text-content,
.layout-30 .configurable-card-text-content,
.layout-31 .configurable-card-text-content,
.layout-32 .configurable-card-text-content,
.layout-33 .configurable-card-text-content,
.layout-34 .configurable-card-text-content,
.layout-35 .configurable-card-text-content,
.layout-36 .configurable-card-text-content,
.layout-37 .configurable-card-text-content,
.layout-38 .configurable-card-text-content,
.layout-39 .configurable-card-text-content,
.layout-40 .configurable-card-text-content,
.layout-41 .configurable-card-text-content { 
    grid-area: text; 
}

.layout-1 .configurable-card-icon-content,
.layout-2 .configurable-card-icon-content,
.layout-3 .configurable-card-icon-content,
.layout-4 .configurable-card-icon-content,
.layout-5 .configurable-card-icon-content,
.layout-6 .configurable-card-icon-content,
.layout-7 .configurable-card-icon-content,
.layout-8 .configurable-card-icon-content,
.layout-9 .configurable-card-icon-content,
.layout-10 .configurable-card-icon-content,
.layout-11 .configurable-card-icon-content,
.layout-12 .configurable-card-icon-content,
.layout-13 .configurable-card-icon-content,
.layout-14 .configurable-card-icon-content,
.layout-15 .configurable-card-icon-content,
.layout-16 .configurable-card-icon-content,
.layout-17 .configurable-card-icon-content,
.layout-18 .configurable-card-icon-content,
.layout-19 .configurable-card-icon-content,
.layout-20 .configurable-card-icon-content,
.layout-21 .configurable-card-icon-content,
.layout-22 .configurable-card-icon-content,
.layout-23 .configurable-card-icon-content,
.layout-24 .configurable-card-icon-content,
.layout-25 .configurable-card-icon-content,
.layout-26 .configurable-card-icon-content,
.layout-27 .configurable-card-icon-content,
.layout-28 .configurable-card-icon-content,
.layout-29 .configurable-card-icon-content,
.layout-30 .configurable-card-icon-content,
.layout-31 .configurable-card-icon-content,
.layout-32 .configurable-card-icon-content,
.layout-33 .configurable-card-icon-content,
.layout-34 .configurable-card-icon-content,
.layout-35 .configurable-card-icon-content,
.layout-36 .configurable-card-icon-content,
.layout-37 .configurable-card-icon-content,
.layout-38 .configurable-card-icon-content,
.layout-39 .configurable-card-icon-content,
.layout-40 .configurable-card-icon-content,
.layout-41 .configurable-card-icon-content { 
    grid-area: icon; 
}

.layout-1 .configurable-card-image-content,
.layout-2 .configurable-card-image-content,
.layout-3 .configurable-card-image-content,
.layout-4 .configurable-card-image-content,
.layout-5 .configurable-card-image-content,
.layout-6 .configurable-card-image-content,
.layout-7 .configurable-card-image-content,
.layout-8 .configurable-card-image-content,
.layout-9 .configurable-card-image-content,
.layout-10 .configurable-card-image-content,
.layout-11 .configurable-card-image-content,
.layout-12 .configurable-card-image-content,
.layout-13 .configurable-card-image-content,
.layout-14 .configurable-card-image-content,
.layout-15 .configurable-card-image-content,
.layout-16 .configurable-card-image-content,
.layout-17 .configurable-card-image-content,
.layout-18 .configurable-card-image-content,
.layout-19 .configurable-card-image-content,
.layout-20 .configurable-card-image-content,
.layout-21 .configurable-card-image-content,
.layout-22 .configurable-card-image-content,
.layout-23 .configurable-card-image-content,
.layout-24 .configurable-card-image-content,
.layout-25 .configurable-card-image-content,
.layout-26 .configurable-card-image-content,
.layout-27 .configurable-card-image-content,
.layout-28 .configurable-card-image-content,
.layout-29 .configurable-card-image-content,
.layout-30 .configurable-card-image-content,
.layout-31 .configurable-card-image-content,
.layout-32 .configurable-card-image-content,
.layout-33 .configurable-card-image-content,
.layout-34 .configurable-card-image-content,
.layout-35 .configurable-card-image-content,
.layout-36 .configurable-card-image-content,
.layout-37 .configurable-card-image-content,
.layout-38 .configurable-card-image-content,
.layout-39 .configurable-card-image-content,
.layout-40 .configurable-card-image-content,
.layout-41 .configurable-card-image-content { 
    grid-area: image; 
}