/* Shared editorial layout for the five Hotel Rural Los Piratas pages. */
#main [id] { scroll-margin-top: 5em; }
#banner { background-image: url('../../bilder/intro_1.webp'); }
#banner header { height: auto; min-height: 27em; padding: 4em 3em 2em; }
#banner header h1 {
 max-width: 22em;
 font-size: clamp(1.6em, 3vw, 2.4em);
 line-height: 1.3;
 letter-spacing: .04em;
 text-transform: none;
 margin: 0 0 .85em;
 overflow-wrap: anywhere;
}
#banner header p {
 max-width: 52em;
 font-size: 1.05em;
 line-height: 1.8;
 letter-spacing: normal;
 text-transform: none;
 margin: 0;
}
#banner:before { background-color: #172633; opacity: .64; }
#main h2,
#main h3 { text-transform: none; letter-spacing: .04em; overflow-wrap: anywhere; }
#main .hotel-overview,
#main .hotel-guide { background: #32383f; padding: 3em; }
#main .hotel-overview > p { max-width: 60em; }
.hotel-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3em; }
.hotel-overview-grid h3 { margin-bottom: 1em; font-size: 1.1em; }
.hotel-overview-grid ul { list-style: none; padding: 0; margin: 0; }
.hotel-overview-grid li + li { border-top: 1px solid #4c535b; }
.hotel-overview-grid a {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1em;
 padding: .8em 0;
 border: 0;
 min-height: 3em;
}
.hotel-overview-grid a > span:first-child { font-weight: 700; }
.hotel-capacity { font-size: .9em; text-align: right; }
#main .hotel-facilities header.major { padding: 3em 3em 1em; }
#main .hotel-facilities header.major h2 { margin-bottom: 1.5em; }
#main .hotel-facilities .feature { padding: 3em 2em 1em; }
#main .hotel-unit-heading { margin-bottom: 2em; padding: 0 1em; }
.hotel-unit-heading h2 { margin-bottom: 1em; }
#main .spotlight .image { width: 40%; }
#main .spotlight .image a { display: block; border: 0; }
#main .spotlight .image img { display: block; height: auto; margin: 0; }
#main .spotlight .content { width: 60%; padding: 3em; }
#main .hotel-unit-kind { font-size: .9em; margin: 0 0 .65em; }
#main .hotel-unit-title { font-size: 1.6em; margin: 0 0 1em; }
#main .spotlight .content p { margin-bottom: 1.2em; }
#main .hotel-guide h3 { margin: 2em 0 .7em; }
#main .hotel-guide > :last-child { margin-bottom: 0; }
#main .hotel-arrival { border-left: 3px solid #ffb6af; padding-left: 1em; }
#main .hotel-contact { padding: 3em; background: #32383f; background-image: none; }
#main .hotel-contact header p {
 max-width: 55em;
 margin-left: auto;
 margin-right: auto;
 text-transform: none;
 letter-spacing: normal;
}
#main .button {
 white-space: normal;
 height: auto;
 max-width: 100%;
 min-height: 3em;
 line-height: 1.5;
 padding-top: .9em;
 padding-bottom: .9em;
 overflow-wrap: anywhere;
 letter-spacing: .12em;
}
#main .actions.special { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; }
#main .actions.special > li { padding: 0; min-width: 0; max-width: 100%; }
a:focus-visible { outline: 2px solid #ffb6af; outline-offset: 5px; }
@media screen and (max-width: 980px) {
 #main .spotlight .image,
 #main .spotlight .content { width: 100%; }
 #main .spotlight .image img { max-height: 32em; object-fit: cover; }
 .hotel-overview-grid { gap: 2em; }
}
@media screen and (max-width: 736px) {
 #banner { padding: 5em 1.5em 2.5em; }
 #banner header { min-height: 0; padding: 0; }
 #banner header h1 { font-size: 1.65em; }
 #banner header p { font-size: 1em; line-height: 1.7; }
 #banner footer { margin-top: 1.5em; }
 #main .hotel-overview,
 #main .hotel-guide,
 #main .hotel-contact { padding: 2.5em 1.5em; }
 .hotel-overview-grid { grid-template-columns: 1fr; gap: 2em; }
 #main .hotel-facilities header.major { padding: 2.5em 1.5em 1em; }
 #main .hotel-facilities .feature { padding: 2em 1.5em 1em; }
 #main .hotel-unit-heading { margin: 0; padding: 2.5em 1.5em 1em; background: #32383f; }
 #main .spotlight .content { padding: 2em 1.5em; }
 #main .hotel-unit-title { font-size: 1.3em; }
}
@media screen and (max-width: 360px) {
 .hotel-overview-grid a { flex-wrap: wrap; gap: .2em 1em; }
 .hotel-capacity { text-align: left; }
 #banner header h1 { font-size: 1.5em; }
}