/* =============================================
   India Map – Frontend Responsive Styles
   ============================================= */

/* Outer wrapper – prevents horizontal scroll */
.india-map-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/*
 * Container uses a SINGLE fixed aspect-ratio (like an <img width="100%">).
 * width:100% + height:auto + aspect-ratio means:
 *   - As the screen gets narrower, width shrinks → height shrinks in exact proportion.
 *   - No breakpoint changes, no jumps, no cropping — ever.
 *   - Leaflet's fitBounds() always fills whatever dimensions result.
 *
 * India on a Mercator map is roughly 5 units wide : 6 units tall.
 * aspect-ratio: 5/6 matches that natural shape at every screen size.
 */
.india-map-container-frontend {
    position: relative;
    box-sizing: border-box;
    width:        100%  !important;
    height:       auto  !important;   /* must be auto so aspect-ratio drives height */
    aspect-ratio: 5 / 6;              /* India's natural portrait shape – one ratio, all sizes */
    max-height:   90vh;               /* never taller than the visible viewport */
    max-width:    100%;
    overflow:     hidden;
}

/* The inner Leaflet div must fill the container completely */
.india-map-frontend {
    position: absolute;
    inset: 0;           /* top:0; right:0; bottom:0; left:0 */
    width:  100%;
    height: 100%;
}

.leaflet-container {
    font-family: inherit;
}

/* =============================================
   Popup scaling on smaller screens
   (no dimension changes – only text / popup tweaks)
   ============================================= */
@media (max-width: 768px) {
    .leaflet-popup-content-wrapper { max-width: 200px; }
    .leaflet-popup-content  { font-size: 13px; margin: 10px 12px; }
    .leaflet-popup-content h4 { font-size: 13px; margin: 0 0 4px 0; }
    .leaflet-popup-content p  { font-size: 12px; margin: 2px 0; }
}

@media (max-width: 480px) {
    .leaflet-popup-content-wrapper { max-width: 160px; }
    .leaflet-popup-content  { font-size: 12px; margin: 8px 10px; }
    .leaflet-popup-content h4 { font-size: 12px; }
    .leaflet-popup-content p  { font-size: 11px; }
}

/* =============================================
   Touch devices – usable zoom buttons & grab cursor
   ============================================= */
@media (hover: none) and (pointer: coarse) {
    .leaflet-control-zoom { display: block !important; }
    .leaflet-control-zoom a {
        width:       34px !important;
        height:      34px !important;
        line-height: 34px !important;
        font-size:   18px !important;
    }
    .leaflet-container { cursor: grab; -webkit-tap-highlight-color: transparent; }
    .leaflet-container:active { cursor: grabbing; }
}