/* ------------------------------------------------------------------ *
 * imobile.bisericaneagra.ro
 *
 * The corporate identity is the parish's own, lifted from bisericaneagra.ro:
 * the gold and the red of the Honterusgemeinde shield, Cormorant Garamond for
 * display and Lora for reading, uppercase letter-spaced navigation, and
 * section headings centred over a thin gold rule.
 *
 * Two departures from the parent site, both deliberate:
 *   - running text is left-aligned. The parish site centres its paragraphs;
 *     over a 40-line description of a building that costs the reader a ragged
 *     left edge to find on every line. Headings and intros stay centred.
 *   - the gold is only ever a rule, a mark or a background here. #cea54b on
 *     white is a 2:1 contrast ratio, so links and small text use --gold-deep.
 * ------------------------------------------------------------------ */

/* The @font-face rules live in /fonts/fonts.css, which build.py links from the
   document head rather than @import-ing here: an @import cannot start
   downloading until this file has arrived, which costs a whole round trip
   before the first glyph is even requested. */

:root {
  color-scheme: light;

  --gold:      #cea54b;   /* the shield */
  --gold-deep: #8a6414;   /* the same colour, dark enough to read as text */
  --gold-tint: #f8f1de;
  --red:       #af1e22;   /* the church silhouette in the shield */
  --red-deep:  #8e181b;
  --ink:       #222529;   /* headings, from the parent site */
  --body:      #55524d;
  --muted:     #7d766c;
  --dark:      #1d2127;
  --paper:     #ffffff;
  --cream:     #faf8f4;
  --cream-deep:#f3efe6;
  --line:      #e6dfd1;
  --line-soft: #efe9dd;

  --display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --text:    'Lora', Georgia, 'Times New Roman', serif;

  --wrap: 71rem;
  --pad:  clamp(1.15rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: clamp(0.97rem, 0.94rem + 0.14vw, 1.04rem);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--red); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.16;
  color: var(--ink);
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); letter-spacing: 0.01em; }
h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  text-transform: uppercase; letter-spacing: 0.055em;
}
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* The parish site sets a gold hairline with a diamond under every page title.
   `.rule` is that ornament; it is a span so it can sit inside a centred block
   without an empty div. */
.rule { display: block; margin: 1.2rem auto 1.6rem; width: 8rem; height: 1px; background: var(--line); position: relative; }
.rule::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0.4rem; height: 0.4rem; margin: -0.2rem 0 0 -0.2rem;
  background: var(--gold); transform: rotate(45deg);
}

.kicker {
  font-family: var(--display);
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.5em;
}

.lead {
  font-size: clamp(1.06rem, 1rem + 0.55vw, 1.28rem);
  line-height: 1.65; color: var(--body);
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--dark); color: #fff; padding: 0.7rem 1rem; z-index: 100; }
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- head */

.site-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(206, 165, 75, 0.25);
}
.site-head > .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: inherit; }
.brand img { width: auto; height: 3.1rem; }
.brand b {
  font-family: var(--display); font-weight: 600; font-size: 1.12rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink);
  line-height: 1.2; display: block;
}
.brand span { display: block; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.head-nav { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.6rem); flex-wrap: wrap; }
.head-nav a {
  font-family: var(--display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--gold);
}
.head-nav a:hover { color: var(--red); }
@media (max-width: 56rem) { .head-nav .only-wide { display: none; } }

.langs { display: flex; gap: 0.1rem; margin-left: 0.4rem; padding-left: 0.8rem; border-left: 1px solid var(--line); }
.langs a {
  display: block; padding: 0.2rem 0.42rem; border-radius: 2px;
  font-family: var(--display); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
}
.langs a:hover { background: var(--gold-tint); color: var(--gold-deep); }
.langs a[aria-current='true'] { background: var(--gold); color: #fff; }

/* ---------------------------------------------------------------- hero */

/* Every photograph of this house is a 4:3 frame of a two-storey front on a
   narrow street: there is no version of it that fills a wide band without
   losing either the roofline or the gate. It is shown whole and centred, and
   the band around it is filled with the same photo blurred and darkened, so a
   wide screen gets the building's own colours rather than black bars. */
.hero { position: relative; isolation: isolate; display: flex; justify-content: center; background: var(--dark); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--hero-blur) center 42% / cover no-repeat;
  filter: blur(44px) brightness(0.4) saturate(1.1);
  transform: scale(1.16);
}
.hero > img {
  width: auto; max-width: min(100%, 74rem); max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}
.hero-body { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.25rem, 5vw, 3.5rem); }
.hero-card { max-width: 48rem; margin-inline: auto; text-align: center; }
.hero-card h1 { margin-bottom: 0; }
.hero-card .lead { margin-bottom: 1.7em; text-align: left; }

.btn {
  display: inline-block; background: var(--red); color: #fff;
  padding: 0.72rem 1.5rem; border-radius: 2px; text-decoration: none;
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--red-deep); color: #fff; }
.btn--gold { background: var(--gold); }
.btn--gold:hover { background: var(--gold-deep); }
.btn--quiet {
  background: transparent; color: var(--gold-deep);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--quiet:hover { background: var(--gold-tint); color: var(--red); box-shadow: inset 0 0 0 1px var(--gold); }
.btn--quiet .size { font-size: 0.8em; letter-spacing: 0.04em; color: var(--muted); text-transform: none; }

/* ------------------------------------------------------------ sections */

.section { padding-block: clamp(2.75rem, 7vw, 5rem); }
.section--alt { background: var(--cream); border-block: 1px solid var(--line-soft); }
.section--ink { background: var(--dark); color: #ded7cc; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .lead { color: #cdc4b7; }
.section--ink small, .section--ink figcaption { color: #a49b8e; }
.section--ink a { color: var(--gold); }
.section--ink a:hover { color: #fff; }
.section--ink .kicker { color: var(--gold); }
.section--ink .rule { background: rgba(255, 255, 255, 0.22); }

.intro { max-width: 46rem; margin-inline: auto; text-align: center; }
.intro > p:not(.kicker) { text-align: left; }

.cols { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 54rem) { .cols--2 { grid-template-columns: 1.12fr 1fr; } }

/* ------------------------------------------------- the property listing */

.props { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 50rem) { .props { grid-template-columns: repeat(2, 1fr); } }
/* One building in the list would otherwise sit in the left half of a two-column
   grid with the right half empty, which reads as a page still loading. A lone
   card lies down instead: photo beside text, full width. */
@media (min-width: 50rem) {
  .props--one { grid-template-columns: 1fr; }
  .props--one .prop { flex-direction: row; align-items: stretch; }
  .props--one .prop img { width: 46%; aspect-ratio: auto; align-self: stretch; min-height: 21rem; object-fit: cover; }
  .props--one .prop-body { padding: clamp(1.5rem, 3vw, 2.5rem); }
}
.prop {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.prop:hover { border-color: var(--gold); box-shadow: 0 0.5rem 1.5rem rgba(29, 33, 39, 0.08); }
.prop img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prop-body { padding: clamp(1.15rem, 3vw, 1.75rem); flex: 1; display: flex; flex-direction: column; }
.prop-body h3 { margin-bottom: 0.3em; }
/* The body is a flex column, so an inline-block child still stretches to the
   full width unless it is told not to — a status chip the width of the card. */
.prop-body .tag { align-self: flex-start; }
.prop-body p { font-size: 0.95rem; }
.prop .more {
  margin-top: auto; padding-top: 0.9rem;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red);
}
.prop:hover .more { color: var(--gold-deep); }

.tag {
  display: inline-block; font-family: var(--display); font-size: 0.9rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-tint);
  padding: 0.18rem 0.55rem; border-radius: 2px; margin-bottom: 0.7rem;
}
.tag--let { color: var(--muted); background: var(--cream-deep); }

/* ------------------------------------------------- nothing free just now */

.vacancy {
  max-width: 46rem; margin: 2.5rem auto 0;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 2px; padding: clamp(1.35rem, 3.5vw, 2.1rem);
}
.vacancy h3 { margin-bottom: 0.4em; }
.vacancy .btn { margin-top: 0.7rem; }

/* ----------------------------------------------------- the space on offer */

.space {
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  margin-block: 2.5rem; overflow: hidden;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 58rem) { .space { grid-template-columns: 1.05fr 1fr; } }
.space-plan { background: var(--cream); border-bottom: 1px solid var(--line); display: flex; }
@media (min-width: 58rem) { .space-plan { border-bottom: 0; border-right: 1px solid var(--line); } }
.space-plan .shot { flex: 1; display: flex; align-items: center; padding: 1.1rem; }
.space-plan img { width: 100%; }
.space-body { padding: clamp(1.3rem, 3vw, 2.1rem); }
.space-body h3 { margin-bottom: 0.35em; }

.space dl {
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem;
  margin: 1.2rem 0 0; font-size: 0.95rem;
  border-top: 1px solid var(--line-soft); padding-top: 1rem;
}
.space dt { color: var(--muted); }
.space dd { margin: 0; color: var(--ink); }
.space dd b { font-weight: 600; }
.space .price { font-family: var(--display); font-size: 1.15rem; color: var(--red); font-weight: 600; }
.space-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; }

.rooms { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 26rem) { .rooms { grid-template-columns: repeat(2, 1fr); } }
.rooms li { background: var(--paper); padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.rooms b { display: block; font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--gold-deep); line-height: 1.2; }
.rooms span { color: var(--muted); font-size: 0.85rem; }

/* --------------------------------------------------------------- lists */

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.facts li { padding-left: 1.7rem; position: relative; }
.facts li::before {
  content: ''; position: absolute; left: 0; top: 0.75em;
  width: 0.5rem; height: 0.5rem; background: var(--gold);
  transform: rotate(45deg);
}
.facts strong { font-weight: 600; color: var(--ink); }

.terms { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 46rem) { .terms { grid-template-columns: repeat(2, 1fr); } }
.terms li { background: var(--paper); padding: 1rem 1.2rem; font-size: 0.95rem; }
.terms li::before { content: counter(t) '. '; counter-increment: t; font-family: var(--display); font-weight: 600; color: var(--gold-deep); }
.terms { counter-reset: t; }
.section--alt .terms li { background: var(--paper); }

.note { border: 1px solid var(--line); border-left: 3px solid var(--gold); background: var(--paper); border-radius: 2px; padding: 1.3rem; margin-top: 2rem; }
.note h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.note p { font-size: 0.94rem; }
.section--ink .note { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); border-left-color: var(--gold); }

/* ----------------------------------------------------------- timeline */

.timeline { list-style: none; margin: 2.5rem 0 0; padding: 0 0 0 1.6rem; border-left: 1px solid var(--line); }
.section--ink .timeline { border-color: rgba(255, 255, 255, 0.2); }
.timeline li { position: relative; padding-bottom: 2rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: calc(-1.6rem - 4px); top: 0.7em;
  width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg);
}
.timeline .year {
  display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.2em;
}
.timeline p { margin: 0; }

/* ------------------------------------------------------------ figures */

figure { margin: 0; }
figure img { border-radius: 2px; }
figcaption { font-size: 0.85rem; font-style: italic; color: var(--muted); margin-top: 0.65rem; line-height: 1.6; }

.plates { display: grid; gap: clamp(1.2rem, 3vw, 2rem); margin-top: 2.75rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .plates { grid-template-columns: repeat(2, 1fr); } }
.plates figure img { width: 100%; }

.gallery { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 44rem) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ------------------------------------------------------------ lightbox *
 * A `:target` overlay: a photo is a link to #<key>-p<n>, and prev / next /
 * close are links to neighbouring anchors, so the gallery needs no
 * JavaScript. Escape does not close it; the ×, the backdrop and the browser's
 * Back button do.
 * ------------------------------------------------------------------ */
.shot { display: block; position: relative; overflow: hidden; background: var(--cream-deep); }
.shot img { transition: transform 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .shot img { transition: none; } }
.shot:hover img { transform: scale(1.04); }
.shot:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.lightbox { display: none; }
.lightbox:target {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 90;
  background: rgba(18, 16, 14, 0.95);
  padding: clamp(0.75rem, 4vw, 3rem);
}
.lb-back { position: absolute; inset: 0; cursor: zoom-out; }
.lightbox figure { position: relative; margin: 0; display: grid; gap: 0.75rem; justify-items: center; max-height: 100%; min-height: 0; }
.lightbox figure img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; object-fit: contain; background: #fff; }
.lightbox figcaption { color: #ece4d8; font-style: normal; text-align: center; max-width: 46rem; text-wrap: balance; }
.lightbox figcaption b { color: var(--gold); font-weight: 600; margin-right: 0.4rem; }
.lb-btn {
  position: absolute; display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none;
  font-size: 1.6rem; line-height: 1;
}
.lb-btn:hover, .lb-btn:focus-visible { background: var(--gold); color: #fff; }
.lb-prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-close { top: clamp(0.5rem, 2vw, 2rem); right: clamp(0.5rem, 2vw, 2rem); font-size: 1.4rem; }

/* ------------------------------------------------------------ contact */

.contact-card { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 2px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.contact-card .mail { font-family: var(--display); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 600; display: inline-block; margin-bottom: 0.5rem; word-break: break-word; }
.contact-card .tel { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.addr { font-style: normal; color: var(--muted); font-size: 0.94rem; margin-top: 1rem; }
.addr b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- footer */

.site-foot { background: var(--dark); color: #a49b8e; padding-block: 2.5rem; font-size: 0.86rem; }
.site-foot .wrap { display: grid; gap: 1.25rem 2.5rem; }
@media (min-width: 46rem) { .site-foot .wrap { grid-template-columns: 1.4fr 1fr; } }
.site-foot p { margin: 0 0 0.35em; }
.site-foot a { color: #cbc2b4; }
.site-foot a:hover { color: var(--gold); }
.site-foot b { color: #ece4d8; font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.credits { font-size: 0.78rem; line-height: 1.65; color: #8d857a; }

/* --------------------------------------------------- language landing */

.landing { min-height: 100vh; display: grid; place-items: center; padding: var(--pad); text-align: center; background: var(--cream); }
.landing img.logo { height: 9rem; width: auto; margin: 0 auto 1.75rem; }
.landing ul { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.landing ul a { display: block; padding: 0.7rem 1.6rem; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink); font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
.landing ul a:hover { border-color: var(--gold); color: var(--gold-deep); }