/* -----------------------------------------------------------------
   hero.css
   ----------------------------------------------------------------- */
.hero {
  background-color: #ececec;
  padding: 10px 0;
  text-align: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  top: 100px;
}

.carousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 14px;
  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: #fff;
  border: 1.5px solid rgba(15,23,42,0.1);
  border-radius: 9999px;          /* full pill */
  box-shadow: 0 1px 4px rgba(15,23,42,0.07);
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: #374151;
  transition: background 0.15s, border-color 0.15s, color 0.15s,
              box-shadow 0.15s, transform 0.12s;
  text-decoration: none;
  user-select: none;
}

.carousel-item i {
  font-size: 0.9rem;
  color: #ff5a5f;
  flex-shrink: 0;
  transition: color 0.15s;
}

.carousel-item:hover {
  background: #fff1f1;
  border-color: rgba(255, 90, 95, 0.4);
  color: #e14e50;
  box-shadow: 0 4px 12px rgba(255, 90, 95, 0.15);
  transform: translateY(-2px);
}
.carousel-item:hover i { color: #e14e50; }

/* Active / selected state (JS adds .active class) */
.carousel-item.active,
.carousel-item[aria-pressed="true"] {
  background: #ff5a5f;
  border-color: #ff5a5f;
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 90, 95, 0.35);
  transform: translateY(-2px);
}
.carousel-item.active i,
.carousel-item[aria-pressed="true"] i { color: #fff; }
/* =================================================================
   Profile section — hero.css additions (merged from profile/css/)
   Profile hero: gallery rail, #carousel, slide cards, upload badge
   ================================================================= */
#hero{
  height: 300px;                          /* band height (desktop default) */
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: var(--rail-bg);
  box-shadow: inset 0 0 100px rgba(0,0,0,0.03);
}

/* =====================================================================
   Pic 1 gallery (kept for Amsterdam page)
   ===================================================================== */
.header-gallery{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--rail-gap);
  overflow-x:auto;
  padding:var(--rail-pad);
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
.header-gallery img{
  flex:0 0 auto;
  width:var(--tile-w);
  aspect-ratio: 4 / 3;
  object-fit:cover;
  border-radius:var(--tile-r);
  box-shadow:var(--tile-shadow);
  transition:transform .25s ease;
  scroll-snap-align:start;
}
.header-gallery img:hover{ transform:translateY(-2px) scale(1.01); }

/* Scrollbar like pic1 */
.header-gallery::-webkit-scrollbar,
#carousel::-webkit-scrollbar{ height:10px; }
.header-gallery::-webkit-scrollbar-thumb,
#carousel::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:9999px;
}
.header-gallery::-webkit-scrollbar-track,
#carousel::-webkit-scrollbar-track{ background:transparent; }

/* === remove the space under the cards === */

/* hide the horizontal scrollbar (keeps scroll with wheel/drag) */
.header-gallery,
#carousel{
  -ms-overflow-style: none;   /* IE/Edge */
  scrollbar-width: none;      /* Firefox */
}
.header-gallery::-webkit-scrollbar,
#carousel::-webkit-scrollbar{
  height: 0 !important;       /* WebKit */
  display: none !important;
}

/* remove inline-image baseline gap */
.header-gallery img,
#carousel .slide img{
  display: block !important;
}

/* make the grey band hug the images tighter */
#hero{
  height: auto !important;
  padding-block: 12px !important;  /* tweak to taste (8–16px) */
}

/* no extra vertical padding on the rails themselves */
.header-gallery,
#carousel{
  padding-block: 0 !important;
}

/* keep cards tight horizontally */
:root{ --rail-gap: 10px; }  /* or 8px if you want them even closer */


/* =====================================================================
   Pic 2 Field Trips — make it **identical** to pic1
   Uses the existing #carousel, .slide, .slide img markup
   ===================================================================== */

/* Remove old carousel constraints and give it the same rail behavior */
#carousel{
  display:flex;
  align-items:center;
  gap:var(--rail-gap);
  width:100%;
  overflow-x:auto;
  padding:var(--rail-pad);
  margin:0 auto;
  position:relative;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  background:var(--rail-bg);              /* same band */
  border-radius:12px;                      /* subtle soft edges like pic1 container */
}

/* Fade edges (like a polished gallery) */
#carousel::before,
#carousel::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:48px;
  pointer-events:none;
  z-index:1;
}
#carousel::before{
  left:0;
  background:linear-gradient(90deg,var(--rail-bg),rgba(245,246,247,0));
}
#carousel::after{
  right:0;
  background:linear-gradient(270deg,var(--rail-bg),rgba(245,246,247,0));
}

/* Each slide acts like a card slot */
.slide{
  flex:0 0 auto;
  width:var(--tile-w);                    /* fixed card width */
  height:calc(var(--tile-w) * 3 / 4);    /* fixed 4:3 height — e.g. 320px → 240px */
  scroll-snap-align:start;
  position:relative;
  overflow:hidden;                        /* clips any image that overflows */
  border-radius:var(--tile-r);
  box-shadow:var(--tile-shadow);
  transition:transform .12s ease;
}

/* Image fills the fixed container regardless of its natural size */
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;                       /* crop-fills, never distorts */
  object-position:center;
  display:block;
  transition:transform .25s ease;
}
.slide img:hover{ transform:scale(1.03); }

/* Mobile sizing (keep slide positioned relative!) */
@media (max-width:480px){
  .slide{ width:240px !important; height:180px !important; }  /* 4:3 at 240px */
  .slide img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:var(--tile-r) !important; }
}

/* Arrow buttons restyled to match modern gallery pills */
button#prev-slide,
button#next-slide{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:40px;
  height:40px;
  border:none;
  border-radius:9999px;
  background:#fff;
  color:#111;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
button#prev-slide:hover,
button#next-slide:hover{
  transform:translateY(-50%) scale(1.03);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  background:#f9fafb;
}
#prev-slide{ left:8px; }
#next-slide{ right:8px; }

/* Menu chip for edit/options */
#carousel-menu.menu-icon{
  position:absolute;
  bottom:16px;
  right:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  min-width:54px;
  padding:0 12px;
  font-size:.9rem;
  font-weight:600;
  line-height:1;
  border-radius:9999px;
  border:1px solid rgba(0,0,0,.08);
  background:#ffffff;
  color:#2563eb;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  cursor:pointer;
  z-index:3;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
}
#carousel-menu.menu-icon:hover{
  background:rgba(37,99,235,.08);
  color:#1e3a8a;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
#carousel-menu.menu-icon:active{ transform:scale(.98); }
#carousel-menu.menu-icon:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.3);
}
#hero.is-busy #carousel-menu.menu-icon{ opacity:.6; pointer-events:none; }

/* Upload badge — pinned to each slide's top-right */
.hero-upload-icon{
  position:absolute;
  top:8px;
  right:8px;
  left:auto;
  transform:none;
  display:none;
  width:44px; height:44px;
  border-radius:50%;
  background-color:rgba(0,0,0,.6);
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
  font-size:20px;
  line-height:1;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:4;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:background-color .2s ease, transform .1s ease;
}
.hero-upload-icon:hover{
  background-color:rgba(0,0,0,.75);
  transform:scale(1.03);
}

/* Show during edit mode (JS toggles .is-editing on #hero) */
#hero.is-editing .hero-upload-icon{ display:flex; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:480px){
  #hero{ height:300px; }

  /* Keep the same card look on phones */
  .header-gallery img,
  #carousel .slide img{
    width:240px;
    aspect-ratio:4/3;
    border-radius:var(--tile-r);
  }

  button#prev-slide, button#next-slide{
    width:36px; height:36px;
  }
}

/* =====================================================================
   Carousel fit — make slide media fill the band fully (no bottom gap).
   The band was vertically centering fixed-height slides, leaving space
   below the images. Stretch the slides to the row and let img/video cover.
   ===================================================================== */
#hero{ align-items: stretch !important; }
#hero #carousel{ align-items: stretch !important; }

#hero #carousel .slide{
  align-self: stretch !important;          /* slide fills the full band height */
  height: auto !important;                 /* width + ratio drive the size */
  aspect-ratio: 4 / 3;
}

#hero #carousel .slide img,
#hero #carousel .slide video{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;            /* crop-fill to the slot edges */
  object-position: center !important;
  display: block !important;
}

/* If you still see a thin even strip top & bottom, it's the band padding —
   reduce this one value (or set 0 to go flush). */
#hero{ padding-block: 8px !important; }