/* -------- Theme & Tokens -------- */
  :root{
    --sunset-1:#ff7a18; /* orange */
    --sunset-2:#ff3d3d; /* red */
    --sunset-3:#a81e5d; /* magenta */
    --card-bg: rgba(255,255,255,0.10);
    --card-stroke: rgba(255,255,255,0.22);
    --glass: rgba(0,0,0,0.28);  /* darker glass for better contrast */
  }
  
  /* -------- Section shell (taller) -------- */
  .sunset-categories{
    position:relative;
    padding-inline:clamp(16px,2.5vw,32px);
    padding-block:clamp(28px, 6vh, 64px);     /* taller section */
    margin-block:clamp(20px,3.5vw,48px);
    min-height:clamp(380px, 58vh, 620px);     /* ensures presence */
    overflow:hidden;                          /* keep background inside section */
    color:#fff;
    isolation:isolate;
    container-type:inline-size;
  }

  /* White blends (inside bounds) */
  .sunset-categories::before,
  .sunset-categories::after{
    content:"";
    position:absolute; left:0; right:0;
    height:64px; pointer-events:none;
    z-index:1; /* above bg, below content */
  }
  .sunset-categories::before{
    top:0;
    background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
  }
  .sunset-categories::after{
    bottom:0;
    background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);
  }

  /* Sunset background inside section */
  .sunset-bg{
    position:absolute; inset:0;
    background:
      radial-gradient(120% 90% at 80% 20%, rgba(255,255,255,0.16), transparent 45%),
      radial-gradient(120% 100% at 0% 100%, rgba(255,255,255,0.10), transparent 45%),
      linear-gradient(135deg, var(--sunset-1), var(--sunset-2) 50%, var(--sunset-3));
    filter:saturate(1.05) contrast(1.03);
    z-index:0;
  }

  /* Header (larger, more contrast) */
  .sunset-header{
    display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    margin-bottom:clamp(16px,2.2vw,22px);
    position:relative; z-index:2;
  }
  .sunset-viewall-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem; font-weight:700; border-radius:999px;
  background: linear-gradient(135deg, var(--sunset-1), var(--sunset-2));
  color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.15);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .sunset-viewall-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
  .sunset-viewall-btn:active{ transform: translateY(0); }

  .sunset-title{ display:flex; align-items:center; gap:12px; }
  .sunset-title h2{
    margin:0; font-weight:900; letter-spacing:.2px;
    font-size:clamp(22px,3vw,34px);                 /* bigger title */
    line-height:1.15;
    text-shadow: 0 2px 18px rgba(0,0,0,.35), 0 1px 0 rgba(0,0,0,.35);
    color: #fff;
  }

  /* -------- Grid (no cutoffs) + slight overlap -------- */
  .sunset-grid{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); /* larger cards */
    gap: 8px;
    perspective: 1100px;
  }
  .sunset-grid .sunset-card { margin-inline:-2px; margin-top: 2.2vh; }  /* subtle overlap */
  @media (max-width:420px){
    .sunset-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  }

/* Edge zones (desktop only): click/hold to scroll */
  /* Desktop: single horizontal row with snap + hidden scrollbar */
@media (min-width:1024px){
  .sunset-grid{
    display:grid !important;
    grid-auto-flow: column !important;                      /* lay items in one row */
    grid-auto-columns: clamp(260px, 19vw, 340px) !important;/* width per card */
    grid-template-columns: none !important;                 /* ignore wrapping template */
    gap: 14px;
    overflow-x: auto;                            /* <-- enables horizontal scroll */
    overflow-y: visible;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;

    /* hide scrollbar */
    scrollbar-width: none;                       /* Firefox */
    -ms-overflow-style: none;                    /* IE/Old Edge */
  }
  .sunset-grid::-webkit-scrollbar{ display:none; } /* Chrome/Safari/Opera */

  .sunset-grid .sunset-card{
    scroll-snap-align: start;
    margin: -2px;                                /* keep subtle overlap */
  }

  /* optional: edge fades (keep if you like) */
  .sunset-grid::before,
  .sunset-grid::after{
    content:""; position: sticky; top:0; bottom:0; width:48px; pointer-events:none; z-index:3;
  }
  .sunset-grid::before{
    left:0; background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0));
  }
  .sunset-grid::after{
    left:calc(100% - 48px); background: linear-gradient(to left, rgba(255,255,255,0.9), rgba(255,255,255,0));
  }

  .sunset-categories{ position:relative; } /* already there, just making sure */

  .sunset-scroll-edge{
    position:absolute;
    top: clamp(60px, 10vh, 120px);      /* start below the title; tweak if needed */
    bottom: clamp(16px, 4vh, 40px);     /* leave room for shadows */
    width: 64px;                         /* edge width (hit area) */
    z-index: 5;
    pointer-events: auto;
    opacity: 0;                          /* normally invisible */
    transition: opacity .15s ease;
    cursor: ew-resize;
    /* gradient hint (very subtle); becomes visible on hover */
    background: linear-gradient(to right, rgba(255,255,255,0.12), rgba(255,255,255,0));
  }
  .sunset-scroll-edge.right{
    right: 0;
    left: auto;
    transform: scaleX(-1);               /* reuse same gradient, mirror it */
  }
  .sunset-scroll-edge.left{ left: 0; }

  /* Show hint when hovering section on desktop */
  .sunset-categories:hover .sunset-scroll-edge{ opacity: .35; }
  .sunset-scroll-edge:hover{ opacity: .55; }

  /* Don’t block clicks to the first/last card area under the edge when not hovering the edge */
  .sunset-scroll-edge{ pointer-events: none; }
  .sunset-categories:hover .sunset-scroll-edge{ pointer-events: auto; }
}

  @media (min-width:1600px){
    .sunset-grid{ grid-auto-columns: clamp(280px, 18vw, 380px); }
  }

  /* -------- Card (bigger + more legible labels) -------- */
  .sunset-card{
    position:relative;
    aspect-ratio: 4 / 3;
    min-height: clamp(210px, 30vw, 300px);          /* bigger base height */
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    background:var(--card-bg);
    border:1px solid var(--card-stroke);
    display:block;
    outline:none;
    transform-style:preserve-3d;
    will-change:transform, filter;
    transition: transform .14s ease-out, box-shadow .14s ease-out, filter .14s ease-out;
    animation: floatUp .5s ease both;
    z-index:1;
    transform-origin:center;
  }
  @media (max-width:560px){
    .sunset-card{ aspect-ratio: 3 / 2; }            /* taller on tiny phones */
  }

  /* Hover lift (base) */
  .sunset-card:hover{ transform: translateY(-6px) scale(1.03); }
  .sunset-card:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 0 0 6px rgba(255,60,60,.45); }

  /* Pop to front */
  .sunset-card:hover,
  .sunset-card:focus-within,
  .sunset-card.is-active{
    z-index: 9;
    transform: translateY(-10px) scale(1.07);
    box-shadow:
      0 24px 60px rgba(0,0,0,.36),
      0 0 0 1px rgba(255,255,255,.18) inset;
  }

  /* Dim siblings when one is active (supported browsers) */
  @supports(selector(:has(*))){
    .sunset-grid:has(.sunset-card:hover),
    .sunset-grid:has(.sunset-card.is-active),
    .sunset-grid:has(.sunset-card:focus-within){ --rest-dim: .9; }
    .sunset-grid:has(.sunset-card:hover) .sunset-card:not(:hover),
    .sunset-grid:has(.sunset-card.is-active) .sunset-card:not(.is-active),
    .sunset-grid:has(.sunset-card:focus-within) .sunset-card:not(:focus-within){ filter: brightness(var(--rest-dim)) saturate(.95); }
  }

  /* Photo + layers */
  .sunset-card .photo{
    position:absolute; inset:0;
    background: var(--bg) center/cover no-repeat;
    filter: saturate(1.06) brightness(.96) contrast(1.06);
  }
  .sunset-card .overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.2) 48%, transparent 70%),
      linear-gradient(to bottom, rgba(0,0,0,.1), transparent 40%);
    mix-blend-mode:multiply;
    pointer-events:none;
  }
  .sunset-card .glow{
    position:absolute; inset:-20%;
    background: radial-gradient(60% 60% at var(--mx,50%) var(--my,50%), rgba(255,255,255,.20), transparent 42%);
    opacity:0; transition:opacity .25s ease; pointer-events:none; mix-blend-mode:screen;
  }
  .sunset-card:hover .glow,
  .sunset-card.is-active .glow{ opacity:1; }

  /* Content — larger text for readability */
  .sunset-card .content{
    position:absolute; inset:auto 0 0 0;
    padding: clamp(14px, 1.6vw, 18px) clamp(14px, 1.8vw, 20px) clamp(18px, 2.2vw, 24px);
    display:grid; gap:10px;
    background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,.18) 40%, transparent 70%);
    backdrop-filter: blur(2px);
  }
  .sunset-card h3{
    margin:0;
    font-weight:900; letter-spacing:.3px;
    font-size: clamp(18px, 2.2vw, 22px);           /* bigger label */
    line-height:1.15;
    text-shadow: 0 2px 14px rgba(0,0,0,.45), 0 1px 0 rgba(0,0,0,.35);
    color: #fff;
  }
  .sunset-card .hint{
    margin:0; opacity:.95;
    font-size: clamp(13px, 1.5vw, 14.5px);         /* slightly larger hint */
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
  }

  /* -------- Thumbnails: bigger + interactive -------- */
  .sunset-card .thumbs{ display:flex; gap:10px; }
  .sunset-card .thumbs span{
    width:42px; height:42px;                       /* bigger thumbs */
    border-radius:12px;
    background: var(--thumb) center/cover no-repeat;
    border:1px solid rgba(255,255,255,.65);
    box-shadow: 0 2px 10px rgba(0,0,0,.28) inset, 0 8px 18px rgba(0,0,0,.28);
    transform: translateY(2px) scale(0.97);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
    filter: saturate(1.1);
  }
  .sunset-card:hover .thumbs span,
  .sunset-card.is-active .thumbs span{
    transform: translateY(-2px) scale(1.05);
    border-color: rgba(255,255,255,.9);
    box-shadow: 0 2px 10px rgba(0,0,0,.25) inset, 0 12px 28px rgba(0,0,0,.35);
  }
  @keyframes thumbPulse { 
    0%,100% { transform: translateY(2px) scale(0.97); } 
    50%     { transform: translateY(-1px) scale(1.0); } 
  }
  .sunset-card .thumbs span:nth-child(1){ animation: thumbPulse 2.6s ease-in-out infinite .0s; }
  .sunset-card .thumbs span:nth-child(2){ animation: thumbPulse 2.6s ease-in-out infinite .2s; }
  .sunset-card .thumbs span:nth-child(3){ animation: thumbPulse 2.6s ease-in-out infinite .4s; }
  .sunset-card:hover .thumbs span,
  .sunset-card.is-active .thumbs span{ animation: none; }

  /* -------- Entrance animation -------- */
  @keyframes floatUp { from { transform: translateY(14px); opacity:.0 } to { transform:none; opacity:1 } }
  .sunset-card:nth-child(odd){ animation-delay: .05s }
  .sunset-card:nth-child(even){ animation-delay: .1s }