/* PERITO Wycena Nieruchomości. The only stylesheet of the site. */

@font-face {
  font-family: "Source Serif Pro";
  src: url("/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: fallback;
}

:root {
  --color-text: #052a3d;
  --color-primary: #449bc0;
  --color-secondary: #b1b230;
  --color-light: #f6f6f6;
  --color-step: #d0d0d0;
  --color-line: #abb8c3;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-serif: "Source Serif Pro", serif;
  --text-small: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.227), 1rem);
  --text-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.227), 1.125rem);
  --text-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.227), 1.875rem);

  --gap: 1.5rem;
  --gutter: clamp(1.5rem, 5vw, 2rem);
  --space-l: clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem);
  --space-xl: clamp(3.75rem, 10vw, 7rem);
  --content: 650px;
  --wide: 1200px;
  --header-height: 91px;
}

/* ---- Base ---- */

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

body {
  margin: 0;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-medium);
  line-height: 1.6;
}

h1, h2, h3 { font-weight: 400; line-height: 1.2; margin: 0; }
h2 { font-size: clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem); }
h3 { font-size: 2.25rem; line-height: 1.4; }
p, ul, figure { margin: 0; }
* + p, * + ul, * + figure, * + h2, * + h3, * + .buttons { margin-top: var(--gap); }

a { color: var(--color-secondary); text-decoration: none; }
a:focus { text-decoration: underline dashed; }
img { display: block; max-width: 100%; height: auto; }

hr {
  width: 100px;
  margin: var(--gap) auto calc(var(--gap) + 1vw);
  border: 0;
  border-top: 2px solid #808080;
}

.center { text-align: center; }
.small { font-size: var(--text-small); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 1000; padding: 0.5rem 1rem; background: #fff; }

/* ---- Layout: page width and sections ---- */

main { margin-top: calc(var(--header-height) + 1.25rem); padding: 0 var(--gutter) var(--space-l); }
main > * + * { margin-top: calc(var(--gap) + 2.5vw); }
.home main { margin-top: 0; padding-bottom: 0; }
main:has(> .banner:last-child) { padding-bottom: 0; }

.content { max-width: var(--content); margin-left: auto; margin-right: auto; }
.wide { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.full { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }

.section { padding-block: var(--gutter); }
.section.full { padding-inline: var(--gutter); }
.section--light { padding-block: calc(var(--gutter) + 2.5vw); background: var(--color-light); }

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
* + .grid { margin-top: var(--gap); }
.grid > * { margin-top: 0; }

/* ---- Buttons ---- */

.buttons { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; }
.buttons--left { justify-content: flex-start; }
.button {
  display: inline-block;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  background: var(--color-primary);
  color: #fff;
  font-weight: 500;
  text-align: center;
}
.button:hover, .button:focus { background: var(--color-text); text-decoration: none; }
.button:active { background: var(--color-secondary); }

/* ---- Header ---- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--space-l);
  background: #fff;
  border-bottom: 1px solid var(--color-line);
}
.logo { display: flex; align-items: center; }
.logo img:first-child { width: 75px; height: 75px; }
.logo img:last-child { width: 150px; height: 90px; }

.menu ul { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; font-size: var(--text-small); }
.menu a { color: var(--color-text); }
.menu a:hover { text-decoration: underline; }
.menu-toggle { display: none; }

@media (max-width: 599px) {
  .menu-toggle {
    display: block;
    padding: 0.5rem;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }
  .menu-toggle svg { display: block; width: 24px; height: 24px; fill: currentColor; }
  .menu ul { display: none; }
  .menu.open ul {
    display: flex;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    flex-direction: column;
    align-items: center;
    padding-top: var(--space-l);
    background: #fff;
    font-size: var(--text-large);
  }
}

/* ---- Hero (home page) ---- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
  padding: calc(var(--header-height) / 2) var(--gutter) 0;
  background: linear-gradient(rgba(5, 42, 61, 0.7), rgba(5, 42, 61, 0.7)), url("/images/backimg.webp") center / cover;
  color: #fff;
  font-family: var(--font-serif);
  text-align: center;
}
.hero h1 { font-size: clamp(2.032rem, 2.032rem + ((1vw - 0.2rem) * 2.896), 3.625rem); font-weight: 700; line-height: 0; letter-spacing: 0.9rem; text-transform: uppercase; }
.hero h1 small { display: block; margin-top: 2.4rem; font-size: var(--text-medium); font-weight: 400; line-height: 1.2; letter-spacing: 0.2rem; text-transform: none; }
.hero p { font-size: var(--text-large); letter-spacing: 0.2rem; }
.hero .buttons { font-family: var(--font-sans); }

/* ---- Banner: full-width photo behind dark overlay ---- */

.banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  padding: var(--gutter);
  background: linear-gradient(rgba(0, 0, 0, var(--dim, 0.6)), rgba(0, 0, 0, var(--dim, 0.6))), var(--photo) center / cover fixed;
  color: #fff;
  text-align: center;
}
.banner h2 { font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 2.285), 48px); }
.banner p { max-width: var(--content); margin-left: auto; margin-right: auto; }
.banner--process { --photo: url("/images/backimg-1.webp"); --dim: 0.7; }
.banner--contact { --photo: url("/images/backimg-2.webp"); }
@supports (-webkit-touch-callout: none) {
  /* iOS ignores fixed backgrounds and blows them up instead. */
  .banner { background-attachment: scroll; }
}

/* ---- Cards: photo + title (+ description) ---- */

.card img { width: 100%; height: 205px; object-fit: cover; }
.card h3 { font-size: var(--text-medium); font-weight: 700; line-height: 1.6; }

/* ---- Lists with icons ---- */

.icon-list { padding: 0; list-style: none; }
.icon-list > li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; }
.icon-list > li > img { flex: none; width: 32px; }
.icon-list ul { margin-top: 1rem; padding-left: 2.5rem; list-style: circle; }

/* ---- Feature columns (icon, heading, text) ---- */

.feature > img { height: 100px; width: auto; margin: 0 auto; }
.feature h3 { font-size: var(--text-medium); font-weight: 700; line-height: 1.6; text-align: center; }

/* ---- About teaser (home) ---- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; }
.split__media { display: flex; align-items: center; justify-content: center; min-height: 550px; padding: 18px; background: var(--color-light); }
.split__media img { aspect-ratio: 1024 / 576; }
.split__text { max-width: var(--content); padding-right: var(--gutter); }

/* ---- Valuation process steps ---- */

.steps { margin-top: 0; }
.step { display: grid; grid-template-columns: 1fr 1fr; }
.step + .step { margin-top: 3vw; }
.step__text { display: flex; align-items: center; padding: 2rem 0 2rem calc(23% + var(--gap)); background: var(--color-step); }
.step__text p { margin-top: var(--gutter); }
.step__text .buttons { margin-top: var(--gap); }
.step__media img { width: calc(100% - 36px); aspect-ratio: 800 / 600; object-fit: cover; }
.step--reverse .step__text { order: 2; padding: 2rem calc(23% + var(--gap)) 2rem 0; background: none; }
.step--reverse .step__media { background: linear-gradient(90deg, var(--color-step) 74%, #fff 74%); }
.step--reverse .step__media img { margin-left: auto; }

/* ---- FAQ ---- */

.faq details { margin-bottom: 15px; border: 1px solid #bcb6b638; border-radius: 5px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #bcb6b638;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.75rem; font-weight: 300; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > :not(summary) { padding: 0 1.5rem; }
.faq details > :last-child { padding-bottom: 1.5rem; }

/* ---- Regions map ---- */

.regions img { width: 100px; height: 116px; margin: 0 auto; }

/* ---- Text pages ---- */

.about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.about__text { padding: var(--gutter); background: var(--color-light); }
.contact { max-width: calc(var(--wide) * 0.55); margin-left: max(0px, (100% - var(--wide)) / 2); }

/* ---- Footer ---- */

.site-footer {
  min-height: 40vh;
  padding: var(--space-xl) var(--space-l) var(--gutter);
  background: var(--color-text);
  color: #fff;
}
.site-footer a { color: #fff; }
.site-footer .grid > div > * + * { margin-top: var(--gap); }
.site-footer .grid > div:first-child > * + * { margin-top: 8px; }
.site-footer .copyright { margin-top: calc(2rem + 0.2rem); font-size: var(--text-small); text-align: center; }

/* ---- Small screens ---- */

@media (max-width: 781px) {
  .grid--2, .grid--3, .grid--4, .split, .about { grid-template-columns: 1fr; }
  .regions { grid-template-columns: repeat(3, 1fr); }
  .split__media { display: none; }
  .split__text { text-align: center; }
  .step, .step--reverse { grid-template-columns: 1fr; }
  .step .step__text, .step--reverse .step__text { order: 2; padding: 2rem var(--gutter); background: var(--color-step); }
  .step--reverse .step__media { background: none; }
  .step__media img { width: 100%; height: auto; }
  .feature p { text-align: center; }
  .contact { max-width: none; }
}

hr.left { margin-left: 0; }