/*
Theme Name: La Antigua Estación
Description: Tema multilingüe para La Antigua Estación, Agramón.
Version: 4.0.0
Requires PHP: 7.4
Text Domain: antigua-estacion
*/
@font-face { font-family: Gloock; src: url('assets/Gloock.ttf') format('truetype'); font-display: swap; }
:root { --blue: #36549b; --deep: #233865; --paper: #faf8f3; --white: #fffdf8; --line: #c8d1e2; --ink: #242c3f; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 system-ui, sans-serif; }
a { color: var(--deep); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
h1, h2, .nav, .footer strong { font-family: Gloock, Georgia, serif; color: var(--deep); font-weight: 400; line-height: 1.15; }
h1 { margin: 0 0 1.5rem; font-size: clamp(2.5rem, 6vw, 5.3rem); max-width: 17ch; }
h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); margin: .25em 0 .55em; }
p { max-width: 68ch; }
.masthead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 1rem max(5vw, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); background: var(--white); }
.brand img { display: block; width: 116px; height: auto; }
.nav { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2rem; }
.nav a { padding: .75rem 0; text-decoration: none; }
.nav a[aria-current] { box-shadow: inset 0 -2px var(--blue); }
.language { position: relative; color: var(--deep); }
.language summary { cursor: pointer; padding: .3em; }
.language div { position: absolute; right: 0; z-index: 5; display: grid; background: var(--white); border: 1px solid var(--line); padding: .5rem 1rem; }
.language a { white-space: nowrap; padding: .3rem 0; }
.content { width: min(90%, 1180px); margin: 0 auto; padding: clamp(2.5rem, 7vw, 6.5rem) 0; min-height: 55vh; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; color: var(--blue); font-weight: 650; }
.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); }
.feature { display: block; width: 100%; height: clamp(16rem, 53vw, 39rem); object-fit: cover; margin: 2.2rem 0; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 2rem 0; }
.area { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card, .booking, .results { background: var(--white); border: 1px solid var(--line); padding: clamp(1.1rem, 3vw, 2rem); }
.card p:last-child { margin-bottom: 0; }
.booking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 810px; }
.booking label { display: grid; gap: .3rem; font-size: .9rem; }
.booking input { min-width: 0; width: 100%; font: inherit; padding: .7rem; color: var(--ink); border: 1px solid var(--line); background: #fff; }
.button { display: inline-block; align-self: start; width: fit-content; border: 1px solid var(--deep); border-radius: 2px; padding: .75rem 1rem; font: inherit; background: var(--deep); color: white; cursor: pointer; text-decoration: none; }
.button:hover { background: var(--blue); color: white; }
.outline { background: transparent; color: var(--deep); }
.results { max-width: 810px; }
.results .button { margin: .4rem .4rem .4rem 0; }
.notice { padding: .8rem 1rem; border-left: 3px solid var(--blue); background: #eaf0fa; }
.footer { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2.5rem 5%; background: #e9edf6; overflow-wrap: anywhere; }
.footer nav { display: flex; flex-wrap: wrap; align-content: start; gap: .5rem 1rem; }
.footer strong { font-size: 1.45rem; }
@media (max-width: 680px) {
  .masthead { grid-template-columns: 1fr auto; gap: .5rem; }
  .brand img { width: 83px; }
  .nav { grid-row: 2; grid-column: 1 / -1; gap: .2rem 1rem; justify-content: start; font-size: .95rem; }
  .cards, .area, .footer { grid-template-columns: 1fr; }
}

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 2rem 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; }

/* Page layouts */
body { background: #f7f6f1; }
.masthead { padding-block: .6rem; gap: 1.25rem; }
.brand img { width: 86px; }
.header-actions { display: flex; align-items: center; gap: .65rem; }
.language summary { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: 999px; padding: .45rem .8rem; font-size: .8rem; font-weight: 650; }
.language summary::-webkit-details-marker { display: none; }
.language div { top: calc(100% + .35rem); min-width: 9rem; border-radius: 14px; box-shadow: 0 10px 28px #23386524; }
.language [aria-current] { font-weight: 750; }
.button { border-radius: 999px; padding: .75rem 1.2rem; }
.nav-book { display: inline-flex; align-items: center; gap: .6rem; background: var(--blue); font-size: .9rem; font-weight: 700; }
.calendar-icon { display: inline-block; width: 1em; height: .95em; border: 1.5px solid currentColor; border-radius: 3px; position: relative; vertical-align: -.08em; flex: 0 0 auto; margin-right: .35rem; }
.calendar-icon::before { content: ''; position: absolute; inset: .22em 0 auto; border-top: 1.5px solid currentColor; }
.calendar-icon::after { content: ''; position: absolute; left: .18em; right: .18em; top: -.19em; height: .27em; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.view-la-casa { width: min(94%, 1440px); padding-top: clamp(.8rem, 3vw, 2.3rem); }
.home-hero { min-height: clamp(450px, 54vw, 690px); position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; display: grid; align-items: end; background: var(--deep); }
.home-hero > img, .home-hero::after { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.home-hero > img { object-fit: cover; object-position: 50% 56%; }
.home-hero::after { content: ''; background: linear-gradient(84deg, #122345e8 0%, #12234582 46%, #12234519 100%), linear-gradient(0deg, #12234599, transparent 55%); }
.hero-copy { padding: clamp(1.6rem, 6vw, 6rem); color: white; }
.hero-copy h1 { color: white; max-width: 13ch; font-size: clamp(3rem, 7.1vw, 6.5rem); }
.hero-copy .eyebrow { color: #eef2ff; }
.hero-copy .button { color: var(--deep); background: var(--white); border-color: var(--white); font-weight: 700; }
.hero-copy .button:hover { background: #dfe9ff; }
.hero-link { display: inline-block; color: white; margin: .7rem 0 .7rem 1.2rem; }
.home-story { max-width: 1080px; margin: clamp(3rem, 8vw, 7rem) auto 0; display: grid; align-items: center; grid-template-columns: .85fr 1fr; gap: clamp(1.5rem, 6vw, 5rem); }
.home-story img { width: 100%; height: clamp(17rem, 32vw, 30rem); object-fit: cover; border-radius: 18px; }
.home-story h2 { font-size: clamp(2rem, 4vw, 3.75rem); }
.card, .booking, .results { border-radius: 20px; border-color: #dde2ed; box-shadow: 0 8px 30px #25396309; }
.room-card, .place-card { padding: 0; overflow: hidden; }
.room-photo, .place-photo { height: clamp(10rem, 24vw, 17rem); }
.room-photo img, .place-photo img, .result-image img, .room-mark { width: 100%; height: 100%; display: block; object-fit: cover; }
.room-mark { background: #e7edf7 url('assets/logo.png') center / auto 57% no-repeat; }
.room-card:nth-child(2) .room-mark { background-color: #e9e8f3; }
.room-card:nth-child(3) .room-mark { background-color: #e1f0ed; }
.room-card:nth-child(4) .room-mark { background-color: #e1e9f4; }
.card-copy { padding: clamp(1.1rem, 3vw, 2rem); }
.card-copy .eyebrow { margin-top: 0; }
.place-card { display: flex; flex-direction: column; }
.place-card .card-copy { flex: 1; display: flex; flex-direction: column; }
.place-card .place-links { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .85rem; }
.place-links .button { padding: .45rem .8rem; }
.photo-credit { display: block; margin-top: 1rem; font-size: .69rem; }
.gallery img { border-radius: 12px; }
.room-results, .booking-rooms { padding: 0; list-style: none; display: grid; gap: .55rem; }
.room-results li, .booking-rooms li { display: flex; align-items: center; gap: .9rem; background: #edf1f8; border-radius: 12px; padding: .65rem; }
.booking-rooms { max-width: 810px; grid-template-columns: 1fr 1fr; }
.result-images { display: flex; flex-wrap: wrap; gap: .2rem; max-width: 132px; flex-shrink: 0; }
.result-image { width: 60px; height: 48px; flex: 0 0 60px; overflow: hidden; border-radius: 6px; }
.room-results small, .booking-rooms small { color: #465570; }
.footer { display: block; padding: 2.4rem max(5vw, calc((100vw - 1180px) / 2)); }
.footer-main { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.footer-main img { width: 90px; height: auto; }
.footer-main address { display: grid; font-size: .93rem; gap: .15rem; font-style: normal; }
.footer-main > a { margin-left: auto; align-self: center; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.25rem; border-top: 1px solid var(--line); padding-top: 1.15rem; margin-top: 1.35rem; }
.footer-bottom small, .footer-bottom nav { font-size: .75rem; }
@media (max-width: 880px) { .area { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) {
  .brand img { width: 70px; }
  .header-actions { grid-column: 2; grid-row: 1; }
  .masthead { gap: .5rem; }
  .nav { justify-content: space-between; gap: .2rem .5rem; }
  .nav-book { padding: .55rem .8rem; }
  .home-hero { min-height: 490px; border-radius: 17px; }
  .home-hero > img { object-position: 58% center; }
  .home-story, .area { grid-template-columns: 1fr; }
  .home-story img { order: 2; }
  .room-photo, .place-photo { height: 13rem; }
  .footer-main > a { margin-left: 0; }
}
@media (max-width: 415px) { .booking, .booking-rooms { grid-template-columns: 1fr; } }


/* Layout wrappers emitted by the two page editors. */
.native-page figure { margin: 0; }
.home-hero > .wp-block-image,
.home-hero > .elementor-widget-image {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
}
.home-hero > .wp-block-image img,
.home-hero > .elementor-widget-image img,
.home-hero > .elementor-widget-image .elementor-widget-container {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%;
}
.home-hero.e-con, .home-story.e-con, .cards.e-con, .gallery.e-con { display: grid; }
.home-hero.e-con, .home-story.e-con, .cards.e-con, .gallery.e-con,
.history.e-con, .card.e-con, .card-copy.e-con, .hero-copy.e-con { --container-max-width: 100%; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; --gap: 0px; }
.hero-copy.e-con { padding: clamp(1.6rem, 6vw, 6rem); }
.card-copy.e-con { padding: clamp(1.1rem, 3vw, 2rem); }
.place-photo figure, .place-photo .elementor-widget-image,
.place-photo .elementor-widget-container { height: 100%; }
.hero-copy .elementor-button, .native-page .elementor-button { background: var(--blue); color: white; border-radius: 999px; }
.hero-copy .elementor-button { background: var(--white); color: var(--deep); }
.hero-copy .elementor-heading-title { color: white; }
.native-page .elementor-heading-title { font-family: Gloock, Georgia, serif; }
.native-page .elementor-widget-heading { margin-bottom: .55rem; }