/* TourGuideGuru photo refresh (Nov 2026). Loaded after style.css; remove this file + its <link> to revert. */

/* Hero: full-bleed photo with a navy overlay so the headline and pills stay readable */
.hero{background:#0b1f3a}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 45%;transform:scaleX(-1)}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,31,58,.88) 0%,rgba(11,31,58,.62) 42%,rgba(11,31,58,.12) 75%,rgba(11,31,58,0) 100%),
             linear-gradient(0deg,rgba(11,31,58,.55) 0%,rgba(11,31,58,0) 38%)}
.hero .wrap{z-index:2}
.hero p.lead{text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media (max-width:640px){
  .hero-photo{object-position:70% 40%}
  .hero:before{background:linear-gradient(180deg,rgba(11,31,58,.82) 0%,rgba(11,31,58,.66) 60%,rgba(11,31,58,.5) 100%)}
}

/* "Plan every part of the trip" cards: photo on top, icon overlaps the photo edge */
.grid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){.grid.g5{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.svc{padding:0 16px 18px;overflow:hidden}
.svc .svc-photo{display:block;width:calc(100% + 32px);max-width:none;margin:0 -16px;aspect-ratio:4/3;height:auto;object-fit:cover;background:var(--sand);transition:transform .35s}
.svc:hover .svc-photo{transform:scale(1.04)}
.svc .ic{position:relative;margin-top:-22px;border:3px solid var(--paper);width:46px;height:46px;box-sizing:border-box}
.svc:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* "Where to next?" decorative banner above the guide cards */
.dest-banner{margin:0 0 20px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:3/1;background:var(--sand)}
.dest-banner img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
@media (max-width:640px){.dest-banner{aspect-ratio:16/9}}

/* "Find a place to stay": photo beside the hotel search widget */
.stay-split{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch}
.stay-photo{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:240px;background:var(--sand)}
.stay-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.stay-split .widget{align-self:center}
@media (max-width:860px){.stay-split{grid-template-columns:1fr}.stay-photo{aspect-ratio:16/9;min-height:0}}

@media (prefers-reduced-motion:reduce){.svc .svc-photo{transition:none}.svc:hover .svc-photo{transform:none}}