.sePage .sePageLayout .sePageMain .rbm-section-details details {
 padding-top: 3px;
 padding-bottom: 3px;
}


/* =============================================== */
/* Difficulty Explainer Section Styles */
/* =============================================== */
.difficulty-explainer-section {
 margin-top: 2rem; /* Space above the section */
 margin-bottom: 8rem; /* Space below the section */
}

.difficulty-explainer-container {
 max-width: 1500px; /* Match other containers */
 margin-left: auto;
 margin-right: auto;
 width: 100%;
 padding-left: 1rem;
 padding-right: 1rem;
 margin-top: 5rem; /* Space above the section */
 margin-bottom: 10rem; /* Space below the section */
}

.difficulty-explainer-title {
 text-align: center;
 margin-bottom: 1.5rem; /* Space below title */
 font-size: 1.8em; /* Slightly larger title */
 color: #333;
}

.difficulty-cards-grid {
 display: grid;
 gap: 1.5rem; /* Slightly larger gap for clarity */
 /* Responsive columns: 1 on small screens, up to 3 on larger screens */
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Force 3 columns on medium screens upwards if auto-fit isn't sufficient */
@media (min-width: 860px) { /* Adjust breakpoint as needed */
 .difficulty-cards-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}


.difficulty-card {
 border: 1px solid #ddd;
 border-radius: 8px;
 padding: 1.5rem;
 background-color: #fdfdfd; /* Slightly off-white background */
 box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 display: flex;
 flex-direction: column;
 align-items: center; /* Center content horizontally */
 text-align: center;
 height: 100%; /* Make cards in a row equal height */
}

/* Style the tag copied from ride cards */
.difficulty-card .ride-card__difficulty-tag {
 margin-bottom: 1rem; /* Space below tag */
}

.difficulty-card__title {
 margin-top: 0;
 margin-bottom: 0.75rem;
 font-size: 1.3em;
 color: #333;
 font-weight: 600;
}

.difficulty-card__description {
 font-size: 0.95em;
 line-height: 1.6;
 color: #555;
 margin-bottom: 0; /* Remove default bottom margin */
}



/* =============================================== */
/* Base & Reset */
/* =============================================== */
*, *::before, *::after {
 box-sizing: border-box;
}

h2, h3, h4, p {
 margin-top: 0; /* Remove default top margins for consistency */
}

html {
 scroll-behavior: smooth;
 /* Default scroll padding, overridden in media queries */
}


/* =============================================== */
/* Location Selector UI (Container & Grid) */
/* =============================================== */
.location-selector-container {
 max-width: 1500px;
 margin-left: auto;
 margin-right: auto;
 width: 100%;
 padding-left: 1rem;
 padding-right: 1rem;
 margin-top: 1.5rem;
 margin-bottom: 2rem;
}

.location-selector-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Mobile-first responsive columns */
 gap: 1rem;
 margin-bottom: 2rem; /* Default space below grid */
 border: none;
 padding: 0; /* No padding by default, added when sticky */
 /* Ensure grid itself doesn't clip sticky content */
 overflow: visible;
}


/* =============================================== */
/* Location Selector Card (Links) */
/* =============================================== */
a.location-selector-card {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 1.5rem 1rem;
 border-radius: 8px;
 background-color: #004c97;
 cursor: pointer;
 text-align: center;
 transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
 font-size: 1.1em;
 font-weight: 500;
 color: #ffffff;
 outline: none;
 min-height: 80px;
 text-decoration: none !important;
}

.location-selector-card .location-name {
 display: block;
color: #ffffff;
}

a.location-selector-card:hover,
a.location-selector-card:focus {
 background-color: #003f97;
color: #ffffff;
 border-color: #bbb;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 transform: translateY(-2px);
}


/* =============================================== */
/* Content Panels & Headers */
/* =============================================== */
.location-content-panels {
 display: flex;
 flex-direction: column;
 gap: 5rem; /* Space between panels */
 /* margin-top added via media query for desktop */
}

.content-panel {
 padding: 1.5rem;
 background-color: #fff;
 border: 1px solid #ccc;
 border-radius: 8px;
background-color: #fcfcfc;
}

.location-panel-header {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 gap: 1rem;
}

.location-panel-header__title {
 margin: 0;
 line-height: 1.2;
 font-size: 1.6em;
 flex: 1 1 auto;
 min-width: 0; /* Allow shrinking */
}

.location-panel-header__button {
 line-height: 1.2;
 flex-shrink: 0; /* Prevent button shrinking */
}


/* =============================================== */
/* Heading Dividers within Panels */
/* =============================================== */

.rbm-heading-divider h2 { /* Style the h2 within the divider */
 margin: 0;
 line-height: 1.2;
 font-size: 1.6em; /* Match panel header title */
}

.content-panel > p {
 margin-bottom: 1rem;
}


/* =============================================== */
/* Ride Card & Internal Content Styles */
/* =============================================== */
.ride-cards-container {
 display: grid;
 gap: 1rem;
 margin-top: 1.5rem;
 grid-template-columns: 1fr; /* Default single column for mobile */
}

/* Responsive columns for ride cards - starts at 600px */
@media (min-width: 600px) {
 .ride-cards-container {
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
 }
}

.ride-card {
 border: 1px solid #ccc;
 border-radius: 8px;
 padding: 1rem;
 background-color: #fff;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 transition: box-shadow 0.2s ease-in-out;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 height: 100%; /* Ensure cards in a row match height */
}
.ride-card:hover {
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.ride-card__difficulty-tag {
 display: inline-block;
 padding: 0.2em 0.6em;
 font-size: 0.8em;
 font-weight: 600;
 border-radius: 4px;
 color: #fff;
 line-height: 1.3;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-bottom: 0.75rem;
}
.tag--family { background-color: #4CAF50; }
.tag--beginner { background-color: #2196F3; }
.tag--avid { background-color: #f44336; }

.ride-card__name {
 margin-top: 0;
 margin-bottom: 0.75rem;
 font-size: 1.2em;
 color: #333;
}
.ride-card__details {
 margin-bottom: 1rem;
}
.ride-card__stat {
 margin-bottom: 0.3rem;
 font-size: 0.9em;
}
.ride-card__stat strong {
 margin-right: 0.5em;
}
.ride-card__map-link {
 display: inline-block;
 text-decoration: none;
 text-align: center;
 padding: 0.5em 1em;
 border-radius: 4px;
 margin-top: auto; /* Pushes button to bottom */
 align-self: flex-start;
}
.ride-card__map-link:hover {
 opacity: 0.9;
}


/* =============================================== */
/* Mobile Sticky Header (JS Controlled) */
/* =============================================== */
.sticky-location-header {
 display: none; /* Initially hidden, JS controls visibility via class */
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background-color: #ffffff;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
 z-index: 1000; /* High z-index for mobile overlay */
 overflow: hidden;
 transform: translateY(-100%);
 transition: transform 0.3s ease-in-out;
 max-height: 50vh; /* Limit height */
}

/* Class added by JS to show the header */
.sticky-header-visible {
 display: block; /* Or grid/flex if needed */
 transform: translateY(0%);
}

.sticky-header-inner {
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* 3 columns */
 gap: 0.5rem;
 padding: 0.5rem;
 max-height: inherit; /* Use parent's max-height */
 overflow-y: auto; /* Enable scroll if content overflows */
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Anchor links styled as buttons inside mobile sticky header */
a.sticky-selector-btn {
 padding: 0.6em 0.5em;
 font-size: 0.85em;
 font-weight: 500;
 color: #fff !important;
 background-color: #004c97;
 border: 1px solid #ccc;
 border-radius: 4px;
 cursor: pointer;
 outline: none;
 transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
 text-align: center;
 white-space: normal; /* Allow wrapping */
 word-break: break-word;
 line-height: 1.3;
 text-decoration: none !important; /* Remove underline */
}

a.sticky-selector-btn:hover {
 background-color: #e0e0e0;
 border-color: #bbb;
 color: #fff;
}


/* =============================================== */
/* Responsive Adjustments */
/* =============================================== */

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
 html {
 /* Set scroll padding for the mobile sticky header */
 /* Adjust based on measured height of .sticky-location-header when visible */
 scroll-padding-top: 80px; /* --- ADJUST FOR MOBILE HEADER --- */
 }
 /* Hide desktop-specific spacing */
 .location-content-panels {
 margin-top: 0;
 }
}

/* Desktop (>= 768px) */
@media (min-width: 768px) {

 /* Make the location selector grid sticky */
 .location-selector-grid {
 position: sticky;
 /* --- ADJUST TOP IF GLOBAL HEADER EXISTS --- */
 top: 0;
 background-color: #ffffff; /* Match page background */
 padding: 1rem 0; /* Vertical padding when sticky */
 z-index: 950; /* Above content, below modals */
 margin-bottom: 0; /* Remove default margin when sticky */
 border-bottom: 1px solid #eee; /* Optional separator */

 /* --- MODIFIED RULE --- */
 /* Limit to a maximum of 6 columns on larger screens */
 /* Overrides the mobile-first auto-fit rule */
 grid-template-columns: repeat(6, 1fr);
 }

 /* Add space ABOVE the content panels to account for sticky grid */
 .location-content-panels {
 margin-top: 2rem; /* Visual separation */
 }

 /* Set scroll padding for desktop anchor links */
 html {
 /* --- IMPORTANT: MEASURE & ADJUST THIS VALUE --- */
 /* Calculate height of the sticky .location-selector-grid + buffer */
 /* Example: 1rem(16px) padding + ~80px button + 1rem(16px) padding = ~112px. Add buffer. */
 scroll-padding-top: 115px; /* --- ADJUST FOR DESKTOP GRID --- */
 }

 /* Ensure mobile sticky header is definitely hidden on desktop */
 .sticky-location-header {
 display: none !important;
 }
}

/* Larger Desktops (e.g., >= 1400px) - Adjust breakpoint as needed */
/* --- NEW MEDIA QUERY BLOCK --- */
@media (min-width: 1400px) { /* --- ADJUST BREAKPOINT IF NEEDED --- */
 .ride-cards-container {
 /* Limit to a maximum of 5 columns on very large screens */
 /* Still ensures cards don't get smaller than 280px */
 grid-template-columns: repeat(5, minmax(280px, 1fr));
 }
}