/* Voyage gay uses the existing type scale, rail and three public themes. */
.stage-gay-travel{--gay-solid:#2455db;--gay-on-solid:#fff;--gay-veil:12,34,89;background:var(--gay-solid);color:var(--gay-on-solid);padding-block:clamp(42px,6vw,84px)}
.theme-morning .stage-gay-travel{--gay-solid:#d23663;--gay-veil:88,17,48}.theme-night .stage-gay-travel{--gay-solid:#f4bb48;--gay-on-solid:#142038;--gay-veil:10,22,43}
.stage-gay-travel .stage-title{color:inherit;margin:0}.gay-home-wrap>header{margin-bottom:28px}.gay-home-wrap>header>p{max-width:65ch;margin:14px 0 0;color:inherit;font-size:var(--ms-type-lead,1.12rem)}
.gay-home-mosaic{display:grid;grid-template-columns:1.12fr 1fr 1fr;grid-auto-rows:clamp(180px,17vw,270px);gap:18px}.gay-tile{position:relative;display:block;overflow:hidden;border-radius:24px;color:#fff;isolation:isolate}.gay-tile-large{grid-row:span 2}.gay-tile>picture,.gay-tile>img{width:100%;height:100%;display:block}.gay-tile img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.gay-tile:hover img{transform:scale(1.025)}
.gay-tile::after{content:'';position:absolute;inset:35% 0 0;z-index:0;background:linear-gradient(transparent,rgba(var(--gay-veil,12,34,89),.88))}.gay-tile-copy{position:absolute;z-index:1;inset:auto 22px 22px;display:grid;gap:5px}.gay-tile-copy strong{font-size:clamp(1.3rem,2.1vw,2.1rem);line-height:1.1}.gay-tile-copy span{font-size:.9rem}.gay-tile-label{position:absolute;top:18px;left:18px;z-index:1;border-radius:50px;background:rgba(255,255,255,.92);color:#142038;padding:7px 12px;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.035em;display:flex;align-items:center;gap:6px}.gay-tile-label svg{width:20px;height:20px}.gay-center{text-align:center;margin-top:28px}.stage-gay-travel .gay-home-all{background:var(--gay-on-solid);color:var(--gay-solid);border-color:transparent}
.page-gay-travel .template-hero .lead{max-width:78ch}.gay-shortcuts{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 48px}.gay-shortcuts a{padding:10px 15px;border:1px solid var(--line);border-radius:50px;text-decoration:none;color:var(--ink);font-weight:700;display:inline-flex;align-items:center;gap:8px}.gay-shortcuts svg,.gay-topic-heading svg{width:25px;height:25px;flex:none}.gay-topic-heading{display:flex;gap:12px;align-items:center}.gay-recommendations{display:grid;gap:55px}.gay-recommendation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 36px;align-items:start}body.page-gay-travel .gay-recommendation h3.gay-rec-heading{margin:0;font-size:var(--ms-type-card-title,1.32rem);line-height:1.18;font-weight:800}.gay-rec-media{grid-column:1;grid-row:1;min-width:0}.gay-rec-copy{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:20px}.gay-recommendation-reverse .gay-rec-media{grid-column:2}.gay-recommendation-reverse .gay-rec-copy{grid-column:1}.page-gay-travel .gay-rec-media .place-rec-media{height:auto;min-height:0;margin:0 0 14px;border-radius:24px;overflow:hidden}.gay-rec-media .place-rec-media>picture,.gay-rec-media .place-rec-media>img,.gay-rec-media .place-rec-slides{width:100%;height:100%}.gay-rec-media img{object-fit:cover}
/* A single portrait source (a narrow nightclub or hotel-sign photo) gets a
   taller box than the standard 16:10 one, so a center-anchored cover crop
   doesn't lose almost all of its height -- but the box keeps the same
   WIDTH as every other card, matching the rest of the grid. Two earlier
   attempts removed cropping entirely (which made the card enormous or
   left empty letterbox bars) before landing on this (2026-11-01). Carousels
   are unaffected: their slides keep the fixed 16:10 box, stacked with
   position:absolute, since they need a shared height to stack into. */
.page-gay-travel .gay-rec-media .place-rec-media.place-rec-media--portrait{aspect-ratio:3/4}
/* The nested <img> inside the responsive <picture> never received an
   explicit height, so object-fit:cover had nothing to crop against: the
   image rendered at its own natural size and simply overflowed past the
   figure's top-left corner, clipped there by its overflow:hidden -- not a
   deliberate, centered crop. That accidental top-left clip, not object-fit
   itself, was the root cause of the original "zoomed into a random corner"
   report (found 2026-11-01). */
.page-gay-travel .gay-rec-media .place-rec-media picture img{height:100%}.gay-rec-text{display:grid;gap:23px}.gay-rec-text h4,.gay-rec-location h4{font-size:1rem;margin:0 0 9px;font-weight:800}.gay-rec-text p{margin:0 0 14px;line-height:1.65;color:var(--ink-soft)}.gay-rec-location{margin-top:20px;padding:20px 0 0;border-top:1px solid var(--line)}.gay-rec-location address{font-style:normal;color:var(--ink-soft);line-height:1.55}.gay-location-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.gay-location-actions .btn{font-size:.75rem;min-height:42px;padding:9px 15px;gap:8px}.gay-rec-source{margin-top:0;align-self:flex-start;display:inline-flex;align-items:center;gap:12px;color:var(--accent);font-weight:800;text-decoration:none}
.gay-personal{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,58px);align-items:center;margin-block:clamp(50px,7vw,90px)}.gay-personal figure{position:relative;margin:0;aspect-ratio:1;overflow:hidden;border-radius:26px}.gay-personal picture,.gay-personal img{display:block;width:100%;height:100%;object-fit:cover}.gay-personal figcaption{position:absolute;bottom:18px;left:18px;padding:7px 12px;border-radius:50px;background:var(--surface);color:var(--ink);font-weight:700}.gay-personal h2{font-size:var(--ms-type-content-title,1.85rem);line-height:1.2}.gay-personal p{line-height:1.65}.gay-quote-mark{display:block;font:700 5rem/1 Georgia,serif;color:var(--accent);height:52px}.gay-personal .gay-signature{font-weight:800;color:var(--ink);margin-top:22px}
.gay-destinations-grid,.gay-linked-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.gay-destination-card,.gay-linked-card{border:1px solid var(--line);border-radius:24px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--surface)}.gay-destination-card figure{margin:0;position:relative;aspect-ratio:4/3}.gay-destination-card figure>picture,.gay-destination-card figure img{height:100%;width:100%;object-fit:cover}.gay-destination-card>div{padding:22px}.page-gay-travel .gay-destination-card h2{font-size:var(--ms-type-card-title,1.32rem);margin:0 0 13px}.gay-destination-card p{font-size:var(--ms-type-body,1.03rem);color:var(--ink-soft);line-height:1.5}.gay-destination-card .template-article-link-next{display:flex;align-items:center;gap:12px;color:var(--accent);font-weight:700}
/* Matches .travel-guide-card-content elsewhere (place-recommendations.css): flex
   column with a gap instead of fixed margins, and a clamped excerpt, so these
   cards read like every other guide/story card on the site (2026-11-02). */
.gay-linked-card>div{padding:18px;display:flex;flex-direction:column;gap:8px}
.gay-linked-kicker{display:flex;align-items:center;gap:6px;font-family:var(--font-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-size:.64rem;font-weight:600}
.gay-linked-card h3{font-size:clamp(1.05rem,1.2vw,1.2rem);line-height:1.25;margin:0}
.gay-linked-card p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.gay-linked-card .template-article-link-next{display:flex;align-items:center;gap:12px;color:var(--accent);font-weight:700;margin-top:auto;padding-top:4px}.gay-linked-card>picture,.gay-linked-card>img{display:block;aspect-ratio:16/10;object-fit:cover;width:100%}.gay-linked-card>picture>img{width:100%;height:100%;object-fit:cover}.gay-linked-grid[data-count="1"]{grid-template-columns:1fr}.gay-linked-grid[data-count="1"] .gay-linked-card{display:grid;grid-template-columns:42% 1fr}.gay-linked-grid[data-count="1"] .gay-linked-card>picture,.gay-linked-grid[data-count="1"] .gay-linked-card>img{height:260px;aspect-ratio:auto}.gay-related{margin-block:42px}.gay-related>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px;border:1px solid var(--line);border-radius:24px;color:var(--ink);text-decoration:none}.gay-related strong{font-size:var(--ms-type-card-title,1.32rem)}.gay-related p{margin:8px 0 0;color:var(--ink-soft)}
.gay-discover-destination{position:relative;min-height:340px;border-radius:26px;overflow:hidden;isolation:isolate;margin-top:65px;--gay-veil:12,34,89}.theme-morning .gay-discover-destination{--gay-veil:88,17,48}.theme-night .gay-discover-destination{--gay-veil:10,22,43}.gay-discover-destination>picture,.gay-discover-destination>img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.gay-discover-destination img{width:100%;height:100%;object-fit:cover}.gay-discover-destination::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--gay-veil),.9),rgba(var(--gay-veil),.08))}.gay-discover-destination>div{max-width:650px;padding:45px;color:#fff}.gay-discover-destination h2{color:#fff;font-size:var(--ms-type-content-title)}.gay-discover-destination .btn{margin-top:18px;gap:10px}
@media(max-width:1000px){.gay-home-mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.gay-tile-large{grid-row:span 2}.gay-destinations-grid,.gay-linked-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.gay-home-mosaic{grid-auto-rows:minmax(170px,auto);gap:12px}.gay-tile-large{grid-column:1/-1;grid-row:auto;min-height:250px}.gay-tile{border-radius:20px}.gay-tile-copy{inset:auto 14px 15px}.gay-tile-copy strong{font-size:1.25rem}.gay-tile-label{top:12px;left:12px;font-size:.6rem;padding:6px 9px}.gay-recommendation{display:flex;flex-direction:column;gap:18px}.gay-rec-heading{order:0}.gay-rec-media{order:1;width:100%}.gay-rec-copy{order:2;width:100%}.gay-personal{grid-template-columns:1fr}.gay-destinations-grid,.gay-linked-grid{grid-template-columns:1fr}.gay-linked-grid[data-count="1"] .gay-linked-card{display:block}.gay-linked-grid[data-count="1"] .gay-linked-card>picture,.gay-linked-grid[data-count="1"] .gay-linked-card>img{height:210px}.gay-discover-destination>div{padding:28px}.gay-discover-destination{min-height:310px}}
@media(prefers-reduced-motion:reduce){.gay-tile img{transition:none}}

.page-gay-travel .gay-recommendations-section,.page-gay-travel .gay-linked-section{margin-top:clamp(45px,5vw,70px)}
.index2-home .stage.stage-gay-travel{background:var(--gay-solid);color:var(--gay-on-solid)}
.index2-home .stage-gay-travel .stage-title,.index2-home .stage-gay-travel .gay-home-wrap>header>p{color:var(--gay-on-solid)}