/* Vila Flamuri: the home page. Loaded after styles.css on the home page only. */

/* ---------- hero: a postcard, not a full-bleed photograph ----------
   The best photographs are 1919 x 1080. A frame at 3:2 no taller than 540 px shows them at 2x on a retina
   screen without upscaling (1080 rows / 2 = 540), which a full-bleed hero at 1440 wide could not. */
.hero { padding-block: clamp(28px, 5vw, 64px) clamp(48px, 7vw, 88px); }
/* Wide: the heading and the intro beside the photograph, and the booking bar across the whole width under
   both, one row, as a booking site lays it out. The markup runs heading, intro, photograph, bar; only the
   bar holds anything focusable, so the focus order is the same in every layout. */
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "head photo" "intro photo" "book book"; column-gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__head { grid-area: head; align-self: end; }
.hero__head > * + * { margin-top: 14px; }
.hero__intro { grid-area: intro; align-self: start; margin-top: 16px; }
.hero__sub { font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem); max-width: 52ch; }
.hero__frame { grid-area: photo; position: relative; margin: 0; }
.hero__frame .ph-photo, .hero__frame img { width: 100%; max-height: 540px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.hero__frame img { box-shadow: var(--shadow-2); }
/* the pennant pinned to the postcard: the name of the house, drawn once at the top of the first page */
.hero__tab { position: absolute; top: -14px; left: 28px; width: 58px; height: 36px; background: var(--terra); clip-path: polygon(0 0, 100% 0, 74% 50%, 100% 100%, 0 100%); }
/* its own stacking level, so a panel opened from the bar is never drawn under the next section */
.hero__book { grid-area: book; position: relative; z-index: 3; margin-top: clamp(28px, 3.4vw, 44px); }
/* Narrow: the photograph, the heading, the bar, then the intro, so the bar is on a phone's first screen
   above the call bar */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "head" "book" "intro"; }
  .hero__head { margin-top: 26px; }
  .hero__book { margin-top: 22px; }
  .hero__intro { margin-top: 22px; }
  .hero__tab { width: 46px; height: 28px; left: 20px; top: -10px; }
}
/* a phone's photograph is its own 4:3 crop; a tablet keeps the 3:2 frame, which leaves the bar on its
   first screen */
@media (max-width: 560px) {
  .hero__frame .ph-photo, .hero__frame img { aspect-ratio: 4 / 3; }
}

/* ---------- the facts under the hero ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; padding-block: 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* align-content: start, or a fact beside one whose heading wraps spreads its two lines apart */
.fact { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; align-content: start; }
.fact .icon { grid-row: span 2; width: 30px; height: 30px; color: var(--petrol); margin-top: 2px; }
.fact__strong { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.fact__detail { color: var(--muted); font-size: 0.95rem; line-height: 1.4; }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Golem on foot: the one dark band ---------- */
.golem__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.golem__text > * + * { margin-top: 16px; }
.golem__text .wave { margin-top: 12px; }
@media (max-width: 860px) { .golem__grid { grid-template-columns: 1fr; } }

/* ---------- languages ---------- */
.langs { padding-block: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.langs__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.langs__row > .icon { width: 30px; height: 30px; color: var(--petrol); }
.langs__h { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.7rem); font-weight: 500; }
.langs__list { display: flex; flex-wrap: wrap; gap: 8px; }
.langs__list li { padding: 5px 14px; border: 1.5px solid var(--petrol); border-radius: var(--pill); color: var(--petrol); font-weight: 700; font-size: 0.92rem; }

/* ---------- the photo teaser: composed, never a flat grid ---------- */
.teaser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(10px, 1.4vw, 16px); }
.teaser__item { position: relative; }
/* a grid item stretched to its area has a definite height, and the picture passes it on to the photograph */
.teaser__item picture { height: 100%; }
.teaser__item .ph-photo, .teaser__item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
/* the feature spans two columns and two rows, so its height is the two squares beside it plus the gap */
.teaser__item--feature { grid-column: span 2; grid-row: span 2; }
.teaser__item--feature .ph-photo, .teaser__item--feature img { aspect-ratio: auto; height: 100%; }
@media (max-width: 860px) {
  .teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser__item--feature { grid-row: auto; }
  .teaser__item--feature .ph-photo, .teaser__item--feature img { aspect-ratio: 4 / 3; }
}

/* ---------- how booking works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); counter-reset: none; }
.step > * + * { margin-top: 10px; }
.step__n { display: inline-grid; place-items: center start; width: 50px; height: 34px; padding-left: 12px; background: var(--terra); color: var(--white); font-weight: 700; clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); }
.step h3 { margin-top: 14px; }
.step p { color: var(--ink); }
.book-alt { margin-top: clamp(28px, 4vw, 44px); font-weight: 600; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }