/*
 * Hostel.se Design: dator-layouten (stil C).
 *
 * Egen fil som länkas med media="(min-width: 1024px)", så mobilen laddar den aldrig som
 * blockerande. Skrivs ut efter den inlinade mobil-CSS:en och vinner vid lika specificitet.
 * Varje överstyrning har minst samma specificitet som mobilregeln den ersätter.
 * Låst till ljust läge (inga regler för mörkt läge). Bara färger ur :root i hostel-design.css.
 */

/* Grund: innehåll högst 1200 px, sidomarginal som sidhuvud och sidfot, textspalter 68ch. */
html { scroll-padding-top: 80px; }
body.hd-page { --hd-gutter: max(24px, calc((100% - 1200px) / 2)); }
/* content-box: 1200 px innehåll plus 24 px marginal, samma linje som sidhuvudets innehåll. */
body.hd-page .hd-main {
	box-sizing: content-box;
	max-width: 1200px;
	padding: 0 24px 48px;
}
body.hd-page .hd-main h1 { font-size: 36px; }
body.hd-page .hd-main h2 { font-size: 24px; }
body.hd-page .hd-main .hd-body,
body.hd-page .hd-main .hd-intro,
body.hd-page .hd-about { max-width: 68ch; }

/* Sidhuvud: följer med vid skrollning (cirka 64 px), under cookiebannern. */
body.hd-page .hd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	gap: 8px;
	min-height: 64px;
	padding: 10px var(--hd-gutter);
}
body.hd-page .hd-logo { margin-right: 16px; }
body.hd-page .hd-menu { display: none; }
body.hd-page .hd-desk-nav { display: flex; flex: 1; min-width: 0; }
body.hd-page .hd-desk-nav__list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.hd-page .hd-desk-nav__list li { margin: 0; }
/* Språken finns redan i .hd-lang, som i mobilmenyn. */
body.hd-page .hd-desk-nav .lang-item { display: none; }
body.hd-page .hd-desk-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--hd-ink);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
body.hd-page .hd-desk-nav__list a:hover { color: var(--hd-ink); text-decoration: underline; }
body.hd-page .hd-desk-nav__list svg { flex: none; }
body.hd-page .hd-desk-nav__list .current-menu-item > a,
body.hd-page .hd-desk-nav__list a[aria-current="page"] { background: var(--hd-white); }
/* Gul knapp sist i raden; margin-left: auto på listposten (flexraden) skjuter den åt höger. */
body.hd-page .hd-desk-nav__list .hd-nav-cta { margin-left: auto; }
body.hd-page .hd-desk-nav__list .hd-nav-cta > a,
body.hd-page .hd-desk-nav__list .hd-nav-cta > a:hover {
	padding: 0 16px;
	background: var(--hd-sun);
	box-shadow: 0 2px 0 var(--hd-ink);
	color: var(--hd-ink);
	font-weight: 800;
	text-decoration: none;
}
body.hd-page .hd-desk-nav__list .hd-nav-cta.current-menu-item > a { text-decoration: underline; text-underline-offset: 4px; }

/* Sidfot: logga och rad till vänster plus tre grupper, bottenrad med tunn linje. */
body.hd-page .hd-footer { padding: 40px var(--hd-gutter) 24px; }
body.hd-page .hd-footer__inner {
	display: grid;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	gap: 24px 32px;
	align-items: start;
}
/* Grupperna i fotens tre kolumner (subgrid där det stöds, annars egna tre kolumner). */
body.hd-page .hd-footer__groups {
	display: grid;
	grid-column: 2 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-columns: subgrid;
	column-gap: 32px;
}
body.hd-page .hd-footer__group { margin-top: 0; }
body.hd-page .hd-footer__heading { margin-bottom: 4px; }
body.hd-page .hd-footer__group ul { flex-direction: column; gap: 0; }
body.hd-page .hd-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 32px;
	padding-top: 12px;
	border-top: 1px solid var(--hd-line);
}
body.hd-page .hd-footer__credit { margin: 0; }
body.hd-page .hd-footer ul.hd-footer__lang { display: flex; gap: 0; }

/* Startsidan: hero i två spalter (text ~45 %, film eller bild). Sista raden (1fr) tar
   upp bildens överskjutande höjd, så att texten inte glesas ut. */
body.hd-page section.hd-hero {
	display: grid;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	grid-template-rows: auto auto auto 1fr;
	column-gap: 40px;
	align-items: start;
	margin-bottom: 24px;
	padding: 32px 0 40px;
}
body.hd-page section.hd-hero > * { grid-column: 1; }
body.hd-page section.hd-hero > :is(.hd-film, .hd-hero__media) {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	margin-top: 0;
}
body.hd-page section.hd-hero h1.hd-title { margin: 0 0 12px; font-size: 40px; }
body.hd-page p.hd-hero__lead { font-size: 18px; }

/* Länslistor i kolumner (uppifrån och ned, samma ordning som i dag). */
body.hd-page .hd-main .hd-counties {
	display: block;
	columns: 3;
	column-gap: 24px;
}
body.hd-page .hd-main--front .hd-counties { columns: 4; }
body.hd-page .hd-main .hd-counties li { break-inside: avoid; }

body.hd-page .hd-posts {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

/* Kartan och Populära orter bredvid varandra från 1280 px (staplade på 1024–1279 px,
   orterna då 4 per rad som i dag). Kartan flyter till vänster; rubriken och ortlistan
   (grid, eget formateringsblock) lägger sig bredvid, och allt efter listan börjar under kartan. */
@media (min-width: 1280px) {
	body.hd-page .hd-main--front .hd-map {
		float: left;
		width: calc(60% - 16px);
		margin: 8px 32px 16px 0;
	}
	body.hd-page .hd-main--front .hd-map + h2 + .hd-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.hd-page .hd-main--front .hd-places ~ *,
	body.hd-page .hd-main--front :is(.hd-posts, .hd-about) { clear: both; }
	/* Utan Populära orter följer rubriken direkt på kartan. */
	body.hd-page .hd-main--front h2:has(+ .hd-posts) { clear: both; }
}

/* Söksidan. Med träffar: filtret till vänster (260 px), träffar och kort till höger.
   .hd-results__bar blir display: contents, så att antalet och filtret blir egna rutor.
   Filtret spänner över raderna 3–6; sista raden (1fr) tar upp filtrets överskjutande höjd.
   Utan sökning ligger allt i full bredd (länslistan i kolumner, kartan). */
body.hd-page .hd-main--search {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	grid-template-rows: auto auto auto auto auto 1fr;
	column-gap: 16px;
	align-items: start;
}
body.hd-page .hd-main--search > * { grid-column: 1 / -1; }
body.hd-page .hd-main--search .hd-results__bar { display: contents; }
body.hd-page .hd-main--search .hd-filter { grid-column: 1; grid-row: 3 / -1; margin-top: 12px; }
body.hd-page .hd-main--search :is(.hd-results__count, .hd-matches, .hd-cards, .hd-results__none) { grid-column: 2; }
body.hd-page .hd-main--search p.hd-results__count { margin: 12px 0 8px; }
body.hd-page :is(.hd-main--search, .hd-main--hub) .hd-search { max-width: 720px; }
/* Filtret är alltid öppet på dator: raden är en rubrik utan klickfunktion. */
body.hd-page .hd-main--search .hd-filter > summary {
	min-height: 0;
	padding: 0 0 8px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--hd-ink);
	font-family: var(--hd-head);
	font-size: 19px;
	cursor: default;
	pointer-events: none;
}
body.hd-page .hd-main--search .hd-filter > summary::after { content: none; }
body.hd-page .hd-main--search .hd-filter__form { margin-top: 0; }
/* Egen regel: en okänd pseudo-element-selektor gör hela regeln ogiltig. */
body.hd-page details.hd-filter::details-content { content-visibility: visible; display: block; }

/* Kort (söksida och ortsidor): stående med bilden överst. aspect-ratio ligger kvar (CLS 0). */
body.hd-page .hd-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
body.hd-page .hd-card { flex-direction: column; }
body.hd-page .hd-card__media { align-self: stretch; width: auto; }
body.hd-page .hd-card__media img { width: 100%; }
body.hd-page .hd-main h3.hd-card__title { font-size: 18px; }

/* Hostellsidan: två spalter (~2/3 + minst 320 px). Brödsmula och rubrik över båda,
   rubriken visuellt före bilden. Rutan till höger spänner över alla vänsterrader.
   Bara kolumnavstånd: radavstånd skulle läggas på även tomma rader i rutans spann. */
body.hd-page.single-tour .hd-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
body.hd-page.single-tour .hd-main--aside {
	grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
	column-gap: 32px;
	align-items: start;
}
body.hd-page.single-tour .hd-main > * { grid-column: 1; }
body.hd-page.single-tour .hd-main > .hd-crumb { grid-column: 1 / -1; grid-row: 1; order: -2; }
body.hd-page.single-tour .hd-main > h1.hd-title { grid-column: 1 / -1; grid-row: 2; order: -1; margin: 8px 0 16px; }
body.hd-page.single-tour .hd-main > .hd-aside {
	grid-column: 2;
	grid-row: 3 / span 20;
	align-self: stretch;
}
body.hd-page .hd-aside {
	box-sizing: border-box;
	padding: 16px;
	border: 1px solid var(--hd-line);
	border-radius: 12px;
	background: var(--hd-white);
}
/* Bara bokningsdelen följer med; faciliteter och kontakt skrollar under den. */
body.hd-page .hd-aside__book {
	position: sticky;
	top: 80px;
	z-index: 1;
	background: var(--hd-white);
}
body.hd-page .hd-aside .hd-facts { margin: 16px 0; }
body.hd-page .hd-aside .hd-contact { margin-bottom: 0; }
body.hd-page .hd-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Bokningslisten används inte på dator (skriptet sätter aldrig is-visible här). */
body.hd-page .hd-sticky { display: none; }