/* Drift Lodge: Amenities page (Amenities.dc.html; the same responsive page on phones). */

.am-sec h2, .house h2 { font-size: clamp(38px, 4.8vw, 62px); }
.dl ul.hl-grid, .dl ul.group-items, .dl ul.house-grid, .dl ul.tips { list-style: none; margin: 0; padding: 0; }

/* Highlights */
.am-highlights { padding-top: 80px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 28px; }
.hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.hl { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 26px; }
.lift { transition: transform .3s ease, box-shadow .3s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(27, 42, 48, .55); }
.hl-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; }
.hl-text { line-height: 1.3; }
.hl-text b { font-weight: 700; font-size: 18px; }
.hl-text span { font-size: 14px; opacity: .78; }

/* Full list */
.am-list { padding-top: 50px; padding-bottom: 90px; display: flex; flex-direction: column; gap: 24px; }
.am-intro, .house-intro { max-width: 28em; }
.cats { display: flex; gap: 8px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #DDD5C9; background: #FFFFFF; color: var(--night); font-size: 14px; font-weight: 600; white-space: nowrap; }
.cat[aria-selected="true"] { background: var(--night); color: #FFFFFF; border-color: var(--night); }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.groups.fadein { animation: dlIn .5s ease both; }
@keyframes dlIn { from { transform: translateY(10px); opacity: .35; } to { transform: none; opacity: 1; } }
.group { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.6vw, 28px); border-radius: 28px; background: #FFFFFF; }
.group-head { display: flex; align-items: center; gap: 14px; }
.group-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 16px; background: var(--sand); color: var(--terracotta); }
.group-head b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; }
.group-count { font-size: 13px; color: var(--grey); }
.group-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 4px 14px; }
.group-items li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid #F1ECE4; font-size: 15px; line-height: 1.35; }
.group-items svg { flex: none; color: var(--teal); }
.item-note { font-size: 12px; }

/* Housekeeping */
.house { background: var(--plum); color: #F3ECE3; }
.house-inner { padding-top: 90px; padding-bottom: 90px; display: flex; flex-direction: column; gap: 28px; }
.house .sec-intro { color: inherit; opacity: .85; }
.house-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.house-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .16); }
.house-key { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #F7B57B; } /* lighter apricot: readable on every card colour */
.house-card b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; }
.house-card span:last-child { font-size: 15px; opacity: .85; }

/* Good to know */
.am-tips { padding-top: 90px; padding-bottom: 90px; display: flex; flex-direction: column; gap: 24px; }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.tip { display: flex; gap: 14px; padding: 20px; border-radius: 24px; background: #FFFFFF; border: 1px solid var(--card-line); }
.tip svg { flex: none; color: #B5674F; }
.tip b { font-weight: 700; }
.tip span span { font-size: 15px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .lift { transition: none; }
  .groups.fadein { animation: none; }
}