/* Group blog (scripts/show-blog-post.php, scripts/show-blog.php) - installed by ~/.claude/skills/group-blog/install_blog.py.
   Sits on the site's main.css + new.css and /css/stay-page.css (cards, article prose, FAQs, TOC, tables, checklists,
   pager all come from there). The accent is the site's own button colour (--spAccent, set by /js/stay-page.js).
   Readable sans (the site's Roboto), tight spacing, mobile first: 16px gutters, nothing wider than the screen. */

.gbBody { overflow-x: hidden; }
.gbMain { padding-bottom: var(--spS6); }
.gbMain img { max-width: 100%; height: auto; }

/* ---------- hero: eyebrow, H1, lead + a real stay photo (580px at most) ---------- */
.gbHero { display: grid; gap: var(--spS3); align-items: center; padding: var(--spS3) 0 var(--spS4); }
.gbHero > * { min-width: 0; }
@media (min-width: 900px) {
	.gbHero { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: clamp(32px, 4vw, 56px); padding: var(--spS4) 0 var(--spS6); }
	.gbHeroSolo { grid-template-columns: minmax(0, 820px); }
}
.gbEyebrow { display: inline-block; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--spAccent); }
.gbMain .gbH1 { margin: 0 0 var(--spS2); font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.9rem); line-height: 1.1; font-weight: 700; letter-spacing: -.015em; color: var(--spInk); text-wrap: balance; }
.gbLead { max-width: 64ch; }
.gbLead p { margin: 0 0 12px; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.65; color: var(--spText); text-wrap: pretty; }
.gbLead p:last-child { margin-bottom: 0; }
.gbMeta { margin: var(--spS2) 0 0; font-size: 14px; color: var(--spMuted); }
.gbMeta i { margin-right: 6px; color: var(--spAccent); }
.gbPhoto { position: relative; margin: 0; width: 100%; max-width: 580px; border-radius: 16px; overflow: hidden; background: var(--spSoft);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 40px -16px rgba(0, 0, 0, .32); }
.gbPhoto > a { display: block; aspect-ratio: 3 / 2; }
.gbPhoto img { display: block; width: 100%; height: 100%; max-width: 580px; object-fit: cover; }
.gbPhoto figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 56px 14px 14px; font-size: 14.5px; color: #fff; pointer-events: none;
	background: linear-gradient(to top, rgba(15, 20, 25, .74), rgba(15, 20, 25, .36) 55%, rgba(15, 20, 25, 0)); }
.gbPhoto figcaption span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbPhoto figcaption span i { margin-right: 4px; }
.gbPhoto figcaption a { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; flex-shrink: 0; padding: 0 14px;
	border-radius: 999px; background: #fff; color: var(--spInk); font-weight: 700; text-decoration: none; }
@media (max-width: 899px) { .gbPhoto { justify-self: start; } }

/* ---------- At a glance ---------- */
.gbGlance { margin: 0 0 var(--spS4); padding: 18px 20px 6px; border-radius: var(--spR); background: var(--spSoft); border-top: 4px solid var(--spAccent); }
.gbMain .gbGlanceTitle { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--spMuted); }
.gbGlanceTitle i { margin-right: 6px; color: var(--spAccent); }
.gbGlance dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 24px; margin: 0; }
.gbGlance dl > div { padding: 10px 0 12px; border-top: 1px solid var(--spLine); min-width: 0; }
.gbGlance dt { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--spMuted); }
.gbGlance dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--spInk); overflow-wrap: anywhere; }
.gbGlance dd a { color: var(--spInk); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- article + "In this guide" ---------- */
.gbGuide { display: grid; gap: var(--spS3); padding-top: var(--spS2); }
@media (min-width: 1000px) {
	.gbGuide { grid-template-columns: minmax(200px, 260px) minmax(0, 760px); gap: clamp(32px, 4vw, 64px); justify-content: center; align-items: start; }
	.gbToc { position: sticky; top: 24px; }
	.gbGuide:not(:has(> .gbToc)) { grid-template-columns: minmax(0, 760px); }
}
@media (max-width: 999px) { .gbToc { padding: 16px 16px 10px; } .gbToc a { padding: 5px 0; } }
.gbArticle { min-width: 0; }
.gbArticle h2 { margin-top: var(--spS5, 40px); }
.gbArticle a { color: var(--spInk); text-decoration: underline; text-decoration-color: var(--spAccent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gbArticle a:hover { color: var(--spAccent); }
.gbArticle img { display: block; max-width: min(100%, 580px); border-radius: var(--spRc); margin: var(--spS3) 0; }
.gbArticle blockquote { margin: var(--spS3) 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--spAccent); font-size: 18px; color: var(--spInk); }
.gbArticle .spCard a, .gbArticle .spView { text-decoration: none; }

/* ---------- "Group stays near <place>" strip inside the article ---------- */
.gbStays { margin: var(--spS4) 0; padding: 20px 0 4px; border-top: 1px solid var(--spLine); border-bottom: 1px solid var(--spLine); }
.gbStaysHead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.spArticle .gbStaysTitle { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; }
.gbArticle .gbStaysAll { font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.gbArticle .gbStaysAll i { margin-left: 4px; color: var(--spAccent); }
.gbStaysCards { margin-bottom: var(--spS3); }
@media (min-width: 641px) { .gbStaysCards.spCards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1000px) { .gbStaysCards.spCards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gbStays .spCardBody { padding: 12px 14px 14px; }
/* the cards sit inside .articleText: undo the article's p / h2 / h3 / link styles (article.css + stay-page.css) */
.gbArticle .gbStays p, .gbArticle .gbStays h3 { text-align: left; max-width: none; }
.gbArticle .gbStays .gbStaysTitle { margin: 0; padding: 0; border: 0; background: none; -webkit-text-fill-color: currentColor; color: var(--spInk); }
.gbArticle .gbStays .spPlace { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; }
.gbArticle .gbStays .spName { margin: 0 0 10px; padding: 0; border: 0; font-size: 16.5px; line-height: 1.3; }
.gbArticle .gbStays .spPrice { margin: 0; font-size: inherit; line-height: 1.3; }
.gbArticle .gbStays a { border-bottom: 0; text-decoration: none; }
.gbArticle .gbStays .spName a { color: var(--spInk); }
.gbArticle .gbStays .spView, .gbArticle .gbStays .spView:hover { color: #fff; }

/* ---------- Keep planning + blog index cards ---------- */
.gbMore { margin-top: var(--spS6); padding-top: var(--spS4); border-top: 1px solid var(--spLine); }
.gbMain .gbSectionTitle { margin: 0 0 var(--spS3); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); line-height: 1.2; color: var(--spInk); }
.gbPageGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.gbPageCard { display: flex; flex-direction: column; min-width: 0; border-radius: var(--spR); overflow: hidden; background: #fff; box-shadow: var(--spLift1);
	color: var(--spText); font-weight: 400; text-decoration: none; transition: transform .3s var(--spEase), box-shadow .3s var(--spEase); }
.gbPageCard:hover, .gbPageCard:focus-visible { transform: translateY(-3px); box-shadow: var(--spLift2); }
.gbPageCardImg { display: block; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #eef1f2, #e2e7e9); overflow: hidden; }
.gbPageCardImg img { display: block; width: 100%; height: 100%; max-width: 580px; object-fit: cover; }
.gbNoImg { display: flex; align-items: center; justify-content: center; font-size: 40px; color: #b9c2c6; }
.gbPageCardBody { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px 16px 16px; }
.gbPageCardBody .gbEyebrow { margin: 0; font-size: 12px; }
.gbPageCardBody b { font-size: 18px; line-height: 1.3; color: var(--spInk); text-wrap: balance; }
.gbPageCardSub { font-size: 15px; line-height: 1.55; color: var(--spText); }
.gbPageCardDate { font-size: 13.5px; color: var(--spMuted); }
.gbPageCardGo { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 700; color: var(--spInk); }
.gbPageCardGo i { margin-left: 4px; color: var(--spAccent); transition: transform .2s var(--spEase); }
.gbPageCard:hover .gbPageCardGo i { transform: translateX(3px); }

/* ---------- blog index head ---------- */
.gbIndexHead { padding: var(--spS4) 0 var(--spS3); max-width: 760px; }
.gbIndexLead { margin: 0; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.65; color: var(--spText); }
.gbIndexGrid { margin-bottom: var(--spS2); }

/* ---------- CTA band ---------- */
.gbCta { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: var(--spS6); padding: 24px;
	border-radius: var(--spR); background: var(--spInk); color: #fff; }
.gbCtaText { flex: 1 1 320px; min-width: 0; }
.gbMain .gbCta h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.2; color: #fff; }
.gbCta p { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .85); }
.gbMain .gbCtaBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 52px; padding: 14px 26px !important;
	border-radius: 999px; font-size: 16px !important; text-decoration: none; white-space: nowrap; }
@media (max-width: 640px) {
	.gbCta { padding: 20px 16px; }
	.gbMain .gbCtaBtn { width: 100%; }
	.gbGlance { padding: 16px 16px 4px; }
	.gbPageGrid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.gbPageCard, .gbPageCardGo i { transition: none !important; }
	.gbPageCard:hover { transform: none; }
}

/* blog hero (11 Nov 2026): the post's topic picture full width, eyebrow + H1 + lead over it, "At a glance" as the box above the fold */
.gbTopHero .gbEyebrow { color: #fff; opacity: .9; margin: 0 0 10px; }
.gbTopHero .gbMeta { color: rgba(255, 255, 255, .85) !important; margin-top: 12px !important; font-size: 14px !important; text-shadow: none; }
.gbTopHero .gbMeta i { color: #fff; }
.gbGlanceHero dl { margin: 0; display: grid; gap: 0; }
.gbGlanceHero dl > div { padding: 10px 0; border-top: 1px solid var(--spLine); }
.gbGlanceHero dl > div:first-child { border-top: 0; padding-top: 2px; }
.gbGlanceHero dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--spMuted); margin: 0 0 3px; }
.gbGlanceHero dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--spInk); }
.gbGlanceHero dd p { margin: 0 !important; font-size: 15px !important; }
.gbGlanceHero .spKitTitle i { color: var(--spAccent); margin-right: 6px; }
.gbGlanceHero { max-height: none; }


/* ---------- "At a glance" card polish (Tom 11/11/2026) - also the "Who's coming?" card on the stay pages ---------- */
.spHeroTool { padding: 0 !important; overflow: hidden; border-radius: 18px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 24px 60px -20px rgba(0, 0, 0, .6) !important; }
.spHeroTool > .spKitTitle { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 16px 22px !important; background: var(--spInk); color: #fff !important; font-size: 1.05rem !important; letter-spacing: .01em; }
.spHeroTool > .spKitTitle i { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--spAccent); color: #fff !important; font-size: 14px; margin: 0 !important; }
.spHeroTool > .spKitHint { display: none; }
.spHeroTool .spRooms, .spHeroTool .spRoomsOut { margin-left: 22px; margin-right: 22px; }
.spHeroTool .spRooms { margin-top: 18px; }
.spHeroTool .spRoomsOut { margin-bottom: 22px; }
.gbGlanceHero .gbFacts { margin: 0; padding: 6px 22px 14px; }
.gbFact { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0; border-top: 1px solid var(--spLine); }
.gbFact:first-child { border-top: 0; }
.gbFactIcon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--spAccent) 12%, #fff); color: var(--spAccent); font-size: 16px; }
.gbFactBody dt { margin: 1px 0 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--spMuted); }
.gbFactBody dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--spInk); }
.gbFactBody dd strong { font-weight: 700; color: var(--spInk); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--spAccent) 22%, transparent) 58%); padding: 0; border-radius: 0; }
.gbBars { list-style: none; margin: 4px 0 0 !important; padding: 0 !important; display: grid; gap: 7px; }
.gbBars li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 54px; align-items: center; gap: 10px; margin: 0 !important; font-size: 14.5px !important; }
.gbBarName { font-weight: 600; color: var(--spInk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbBar { height: 8px; border-radius: 99px; background: var(--spSoft); overflow: hidden; }
.gbBar i { display: block; height: 100%; border-radius: inherit; background: var(--spAccent); }
.gbBarVal { text-align: right; font-variant-numeric: tabular-nums; color: var(--spMuted); font-weight: 600; }

/* no underline on card hover (Tom 12/11/2026) */
.gbPageCard, .gbPageCard:hover, .gbPageCard:focus-visible, .gbPageCard *, .gbPageCard:hover * { text-decoration: none !important; }
.gbPageCard:hover b { color: var(--spAccent); }