.stay-picker { padding: 1.25rem; border: 1px solid var(--color-border, #ddd); border-radius: 12px; background: var(--color-bg-subtle, #fff); margin: 1.5rem 0; }
.stay-picker h2 { font-size: 1.15rem; margin-bottom: .85rem; }
.stay-picker form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
.stay-picker label { display: grid; gap: .3rem; font-size: .85rem; flex: 1 1 145px; min-width: 0; }
.stay-picker input, .stay-picker select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #ccc; border-radius: 8px; background: white; color: #222; font: inherit; padding: .65rem; }
.stay-picker button { min-height: 44px; }
.stay-clear { background: none; border: 0; text-decoration: underline; padding: .5rem; cursor: pointer; }
.stay-hint, [data-stay-status] { font-size: .85rem; color: var(--color-text-secondary, #555); margin-top: .65rem; }
[data-stay-status]:empty { display: none; }
.category-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 16px; margin: 1.5rem 0; }
[data-hotel-results] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.stay-result { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid var(--color-border, #ddd); border-radius: 12px; color: inherit; text-decoration: none; background: var(--color-bg-card, #fff); }
.stay-result:hover, .stay-result:focus-visible { border-color: var(--color-accent, #dd7900); box-shadow: 0 3px 16px #0000000b; }
.stay-result-photo { position: relative; aspect-ratio: 2 / 1; background: var(--color-bg-elevated, #eee); overflow: hidden; }
.stay-result-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stay-result-no-photo { position: absolute; inset: 0; display: grid; place-content: center; font-size: .85rem; color: var(--color-text-secondary, #555); }
.stay-result-no-photo[hidden] { display: none; }
.stay-result-body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.15rem; }
.stay-result-name { font-family: var(--font-heading, Georgia, serif); font-size: 1.2rem; line-height: 1.35; margin: 0; }
.stay-result-location { color: var(--color-text-secondary, #555); font-size: .85rem; margin: 0; }
.stay-result-summary { color: var(--color-text-secondary, #555); font-size: .9rem; line-height: 1.65; margin: 0 0 .3rem; }
.stay-result-facts { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; font-size: .8rem; margin-top: auto; }
.stay-result-rating { border-radius: 5px; background: var(--color-accent, #0d9488); color: white; padding: .2rem .45rem; font-weight: 600; }
.stay-result-link { color: var(--color-accent, #0d9488); font-size: .85rem; font-weight: 600; margin-top: .4rem; }
.stay-result-dates { font-size: .8rem; color: var(--color-text-secondary, #555); }
.stay-empty { grid-column: 1 / -1; padding: 1rem 0; }
.search-item-photo { width: 56px; height: 48px; flex-shrink: 0; object-fit: cover; border-radius: 5px; }
@media (max-width: 640px) {
  [data-hotel-results] { grid-template-columns: minmax(0, 1fr); }
  .category-image { aspect-ratio: 16 / 9; }
}
[data-more-results][hidden] { display: none; }
@media (max-width: 480px) { .stay-picker { padding: 1rem; } .stay-picker label { flex-basis: calc(50% - .75rem); } .stay-picker .btn { flex: 1 1 60%; } }
@media (max-width: 640px) {
  .site-header nav { flex-wrap: wrap; gap: .75rem; }
  .site-header .header-nav { width: 100%; min-width: 0; flex-wrap: wrap; gap: .75rem; }
  .site-header .search-wrapper { width: 100%; }
  .site-header .search-box input { min-width: 0; width: 100%; }
}

/* Hundresa homepage: stable headline space and a wide view of the dog and lake. */
.hero-hundresa .hero-container { height: 380px; }
.hero-hundresa .hero-image { object-position: 75% 47%; }
.hero-hundresa .hero-overlay { background: linear-gradient(90deg, rgba(15, 29, 21, .66), rgba(15, 29, 21, .16) 68%, transparent), linear-gradient(0deg, rgba(15, 29, 21, .3), transparent 70%); }
.hero-hundresa .hero-content { padding: 2.5rem; }
.hero-hundresa .hero-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.18; margin-bottom: .8rem; }
.hero-hundresa .hero-subtitle { color: #fff; max-width: 32rem; }
.hero-destination { display: block; min-height: 1.2em; color: #ffe4ac; }
.hero-destination.is-typing::after { content: ''; display: inline-block; width: 2px; height: .8em; margin-left: .13em; background: currentColor; }
.site-wellnesshotell .hero-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.18; }
.site-wellnesshotell .hero-destination { color: #c9f5e7; }
@media (max-width: 640px) {
  .hero-hundresa .hero-container { height: 400px; }
  .hero-hundresa .hero-image { object-position: 85% center; }
  .hero-hundresa .hero-content { padding: 1.5rem; }
  .hero-hundresa .hero-overlay { background: linear-gradient(0deg, rgba(15,29,21,.88), rgba(15,29,21,.12) 65%, transparent); }
  .hero-hundresa .hero-subtitle { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-destination.is-typing::after { display: none; }
}

/* Four homepage guides on desktop; two on tablet and one on phones. */
.site-hundresa .guide-grid, .site-wellnesshotell .guide-grid, .site-lyxhotellen .guide-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .site-hundresa .guide-grid, .site-wellnesshotell .guide-grid, .site-lyxhotellen .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-hundresa .guide-grid, .site-wellnesshotell .guide-grid, .site-lyxhotellen .guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.guide-hotels { margin: 2rem 0 2.5rem; scroll-margin-top: 1.5rem; }
.guide-hotel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.guide-hotel-card { overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.guide-hotel-image { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.guide-hotel-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .65rem; flex: 1; }
.guide-hotel-body h3 { font-size: 1.15rem; line-height: 1.4; }
.guide-hotel-actions { margin-top: auto; padding-top: .75rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.guide-hotel-actions .btn { width: 100%; white-space: normal; text-align: center; }
@media (max-width: 540px) { .guide-hotel-grid { grid-template-columns: 1fr; } }

/* Long Swedish guide headings must fit narrow screens, including fallback fonts. */
.site-lyxhotellen .page-title, .site-lyxhotellen .prose { overflow-wrap: anywhere; }