/* =====================================================
   MAP COMPONENT: BOXED MAP + LEGEND BELOW
   (v3 - Boxed Content, 3-Row Legend Design)
   ===================================================== */

/* 1. BASE WRAPPER - BOXED CONTENT */
.map-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 0;
    overflow: visible !important;
}

/* 2. MAP IMAGE */
.map-wrapper .map-image-layer img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 3. TRANSPORT CARD - 3 COLUMNS x 2 ROWS GRID */
.map-transport-card {
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(3, auto); /* 3 columns */
    grid-auto-rows: auto; /* 2 rows */
    column-gap: var(--column-gap, 60px); /* Space between columns */
    row-gap: var(--legend-row-gap, 16px); /* Space between rows */
    z-index: 10;
    position: relative;
}

/* 4. TRANSPORT ITEM (Single Location: Name + Icon + Time) */
.transport-item {
    display: grid;
    grid-template-columns: 1fr max-content max-content;
    align-items: center;
    gap: 0; /* No gap, using margins instead */
    justify-items: end; /* Align icon and time to the right */
}

/* Name should align to the left */
.transport-item .t-name {
    justify-self: start;
}

/* Mobile: Single column layout */
@media screen and (max-width: 767px) {
    .map-transport-card {
        grid-template-columns: 1fr; /* Single column */
        column-gap: 0;
        /* Make the card itself act as the sizing container */
        display: grid;
        grid-template-columns: max-content max-content max-content;
        grid-auto-flow: row;
    }
    
    /* Mobile: Items become direct grid children, not separate grids */
    .transport-item {
        display: contents; /* Children become direct grid children */
    }
    
    /* Reorder items for mobile using grid-row on child elements */
    .transport-item:nth-child(1) > * { grid-row: 1; } /* Ostkreuz - Row 1 */
    .transport-item:nth-child(4) > * { grid-row: 2; } /* Frankfurter Allee - Row 2 */
    .transport-item:nth-child(2) > * { grid-row: 3; } /* Alexanderplatz - Row 3 */
    .transport-item:nth-child(5) > * { grid-row: 4; } /* Hauptbahnhof - Row 4 */
    .transport-item:nth-child(3) > * { grid-row: 5; } /* Flughafen BER - Row 5 */
}


/* =====================================================
   TYPOGRAPHY & SYSTEM INTEGRATION
   ===================================================== */

/* Name (Caption Medium) */
.map-transport-card .t-name,
.map-transport-card .t-name span {
    /* Layout */
    white-space: nowrap;
    padding-right: 0 !important; /* Reset old padding */
    
    /* System Typography */
    font-family: "Aeonik", sans-serif !important;
    font-weight: 500 !important; /* Medium */
    font-size: var(--sys-caption-size) !important;
    line-height: var(--sys-caption-med-lh) !important;
    
    margin: 0 !important;
    color: #000 !important;
}

/* Icon (Scales with System) */
.map-transport-card .t-icon {
    text-align: center;
    font-size: var(--sys-caption-size) !important; 
    color: #000;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Compensate for Aeonik font's top spacing */
    transform: translateY(2px);
}

/* Time (Caption Regular) */
.map-transport-card .t-time,
.map-transport-card .t-time span {
    /* Layout */
    white-space: nowrap;
    text-align: right;
    
    /* System Typography */
    font-family: "Aeonik", sans-serif !important;
    font-weight: 400 !important; /* Regular */
    font-size: var(--sys-caption-size) !important;
    line-height: var(--sys-caption-reg-lh) !important;
    
    margin: 0 !important;
    color: #000 !important;
}


/* =====================================================
   GRID SPACING CONFIGURATION (Margins)
   Icon spacing from Name and Time is consistent across all items
   ===================================================== */

/* 1. MOBILE (XS: < 768px) -> Name <40> Icon <12> Time */
@media screen and (max-width: 767px) {
    .map-wrapper {
        --column-gap: 0;
    }
    .transport-item .t-icon {
        margin-left: 40px !important;
        margin-right: 12px !important;
    }
}

/* 2. TABLET (SM: 768px - 1023px) -> Name <16> Icon <6> Time, Column Gap: 40px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .map-wrapper {
        --column-gap: 40px;
    }
    .transport-item .t-icon {
        margin-left: 16px !important;
        margin-right: 6px !important;
    }
}

/* 3. DESKTOP (LG: 1024px - 1439px) -> Name <20> Icon <9> Time, Column Gap: 60px */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .map-wrapper {
        --column-gap: 60px;
    }
    .transport-item .t-icon {
        margin-left: 20px !important;
        margin-right: 9px !important;
    }
}

/* 4. EXTRA LARGE (XL: 1440px+) -> Name <24> Icon <12> Time, Column Gap: 80px */
@media screen and (min-width: 1440px) {
    .map-wrapper {
        --column-gap: 80px;
    }
    .transport-item .t-icon {
        margin-left: 24px !important;
        margin-right: 12px !important;
    }
}


/* =====================================================
   LAYOUT VARIANTS (Positioning & Spacing)
   ===================================================== */

/* --- A. MOBILE (XS: < 768px) --- */
@media screen and (max-width: 767px) {
    .map-wrapper {
        --legend-row-gap: 16px; /* Row spacing */
    }
    
    .map-transport-card {
        margin-top: 20px;
        padding: 0;
    }
}

/* --- B. TABLET (SM: 768px - 1023px) --- */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .map-wrapper {
        --legend-row-gap: 8px; /* Row spacing */
        --column-gap: 40px;
    }
    
    .map-transport-card {
        margin-top: 30px;
        padding: 0;
    }
}

/* --- C. DESKTOP (LG: 1024px - 1439px) --- */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    .map-wrapper {
        --legend-row-gap: 8px; /* Row spacing */
        --column-gap: 60px;
    }
    
    .map-transport-card {
        margin-top: 40px;
        padding: 0;
    }
}

/* --- D. EXTRA LARGE (XL: 1440px+) --- */
@media screen and (min-width: 1440px) {
    .map-wrapper {
        --legend-row-gap: 8px; /* Row spacing */
        --column-gap: 80px;
    }
    
    .map-transport-card {
        margin-top: 50px;
        padding: 0;
    }
}