/* "What Davao is known for": tall mood cards under the landing hero.

   Five portrait cards in a row on a wide screen; on a phone or tablet the row swipes sideways with the next card
   peeking in. Each card is one link: a photo with a dark foot, the number of places in the top corner, and the
   mood's handwritten line, name and "Explore" at the bottom. */

.moods { scroll-margin-top: 70px; }   /* the hero's scroll cue lands here, below the sticky header */

/* ---- the row ---- */
.moods__row {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px;
}
.moods__item { min-width: 0; }

/* ---- a card ---- */
.mood {
    position: relative; display: block; padding: 6px; border-radius: 18px;
    background: #fff; box-shadow: 0 8px 22px rgba(16, 40, 30, .10);
    color: #fff; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.mood:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(16, 40, 30, .18); }
.mood:focus-visible { outline: 3px solid var(--accent, #ff693b); outline-offset: 3px; }

.mood__photo {
    position: relative; display: block; overflow: hidden; border-radius: 13px;
    aspect-ratio: 9 / 16;
    background: linear-gradient(to bottom, #3d5f50, #12261d);
}
.mood__photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%);
    transition: transform .6s ease;
}
.mood:hover .mood__photo img { transform: scale(1.05); }
.mood__photo::after {          /* the dark foot the words sit on */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(8, 24, 17, .94) 0%, rgba(8, 24, 17, .6) 30%, rgba(8, 24, 17, 0) 62%);
}
.mood__photo--none { display: grid; place-items: center; }
.mood__photo--none svg { width: 30px; height: 30px; color: rgba(255, 255, 255, .45); }

.mood__count {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    padding: 4px 9px; border: 1px dashed rgba(255, 255, 255, .75); border-radius: 6px;
    background: rgba(10, 30, 22, .45);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    font: 700 .72rem/1.2 'Poppins', sans-serif; letter-spacing: .02em; white-space: nowrap;
}

.mood__copy {
    position: absolute; left: 16px; right: 14px; bottom: 16px; z-index: 2;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.mood__kicker { color: var(--sun-glow, #f6c75a); font-size: 1.05rem; line-height: 1.1; }
/* The name is sized from the card it sits on, so the longest word ("HIGHLANDS") always fits on one line whatever
   the screen: "HIGHLANDS" is about 6.6em wide in this face, and the name has the card's width less the 30px of
   inset around it, so the size is that width over 7.1em. (The first line is the fallback for a browser without
   container units.) */
.mood { container-type: inline-size; }
.mood__name {
    font-size: clamp(1.25rem, 1.5vw, 1.6rem);
    font-size: clamp(1.1rem, calc((100cqw - 30px) / 7.1), 2rem);
    line-height: 1; text-transform: uppercase; color: #fff; overflow-wrap: break-word;
}
.mood__cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font: 700 .84rem 'Poppins', sans-serif; color: #fff;
}
.mood__cta svg { width: 15px; height: 15px; transition: transform .2s ease; }
.mood:hover .mood__cta svg { transform: translateX(4px); }

/* ---- tablet and phone: a swipeable row ---- */
@media (max-width: 1100px) {
    .moods__row {
        display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 -20px; padding: 6px 20px 22px; scroll-padding-inline: 20px;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .moods__row::-webkit-scrollbar { display: none; }
    .moods__item { flex: 0 0 clamp(190px, 30vw, 240px); scroll-snap-align: start; }
}
@media (max-width: 640px) {
    .moods__item { flex-basis: min(62vw, 230px); }
    .mood__photo { aspect-ratio: 3 / 5; }
    .mood__count { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .mood, .mood__photo img, .mood__cta svg { transition: none; }
    .mood:hover { transform: none; }
    .mood:hover .mood__photo img { transform: none; }
}

/* The place count counts up as the card scrolls into view (public/js/count-up.js): digits of equal width, so the
   badge does not change width while it counts. */
.mood__count [data-count-up] { font-variant-numeric: tabular-nums; }

/* ---- the slideshow controls (built by public/js/mood-slideshow.js, only where the row is a swipe row) ---- */
.moods__controls { display: none; }
@media (max-width: 1100px) {
    .moods__controls {
        display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: -6px; min-height: 20px;
    }
    .moods__dots { display: flex; align-items: center; gap: 8px; }
    .moods__dot {
        width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
        background: rgba(11, 94, 82, .25); transition: width .25s ease, background .25s ease;
        /* a bigger tap area than the dot itself */
        position: relative;
    }
    .moods__dot::after { content: ""; position: absolute; inset: -12px -5px; }
    .moods__dot[aria-current="true"] { width: 26px; background: var(--primary); }
    .moods__dot:focus-visible { outline: 3px solid var(--accent, #ff693b); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .moods__dot { transition: none; } }