/* ==========================================================================
   OSSA Nieruchomości — base stylesheet
   Design tokens, reset, typography, shared components (header, footer,
   buttons, property cards, appear animations).
   Breakpoints (matching the original): 0–809 / 810–1199 / 1200–1439 / 1440+
   ========================================================================== */

:root {
  /* Colors (extracted from the original token set) */
  --c-bg: #f7f2f2;
  --c-white: #fff;
  --c-black: #000;
  --c-dark: #433f38;
  --c-text: #525252;
  --c-text-70: rgba(82, 82, 82, 0.7);
  --c-text-45: rgba(82, 82, 82, 0.45);
  --c-text-30: rgba(82, 82, 82, 0.3);
  --c-orange: #ed6a14;
  --c-orange-60: rgba(237, 106, 20, 0.6);
  --c-beige: #cbc4bc;
  --c-beige-60: rgba(203, 196, 188, 0.6);
  --c-beige-15: rgba(203, 196, 188, 0.15);
  --c-border: #e8e8e8;
  --c-grey-bg: #fafafa;
  --c-grey: #8c8c8c;
  --c-white-60: rgba(255, 255, 255, 0.6);
  --c-white-70: rgba(255, 255, 255, 0.7);
  --c-copy: rgba(82, 82, 82, 0.7);

  /* Fonts */
  --f-display: "MADE Voyager PERSONAL_USE Regular", "Times New Roman", serif;
  --f-ui: "Plus Jakarta Sans", sans-serif;
  --f-body: "Inter", sans-serif;
  --f-copy: Arial, sans-serif;

  /* Layout */
  --gutter: 50px;
  --grid-gap: 30px;
  --radius-pill: 50px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background: var(--c-bg);
  font-family: var(--f-body);
  color: var(--c-text);
  min-height: 100vh;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Layout helpers ---------- */
.container { padding-left: var(--gutter); padding-right: var(--gutter); }
@media (max-width: 809px) {
  :root { --gutter: 20px; --grid-gap: 20px; }
}

/* ---------- Typography presets (1:1 with original) ---------- */
/* Section title (h3) */
.t-section { font-family: var(--f-display); font-weight: 400; color: var(--c-dark); font-size: 22px; line-height: 1em; }
@media (max-width: 1439px) and (min-width: 1200px) { .t-section { font-size: 34px; } }
@media (max-width: 1199px) and (min-width: 810px)  { .t-section { font-size: 30px; } }
@media (max-width: 809px) { .t-section { font-size: 22px; line-height: 1.3em; } }

/* Large heading (h4 – contact form) */
.t-h4 { font-family: var(--f-display); font-weight: 400; color: var(--c-dark); font-size: 32px; line-height: 1.2em; }
@media (max-width: 1439px) and (min-width: 1200px) { .t-h4 { font-size: 27px; } }
@media (max-width: 1199px) and (min-width: 810px)  { .t-h4 { font-size: 28px; } }
@media (max-width: 809px) { .t-h4 { font-size: 26px; line-height: 1.5em; } }

/* Blog heading (h2) */
.t-h2 { font-family: var(--f-display); font-weight: 400; color: var(--c-dark); font-size: 29px; line-height: 1em; }
@media (max-width: 1439px) and (min-width: 1200px) { .t-h2 { font-size: 38px; } }
@media (max-width: 1199px) and (min-width: 810px)  { .t-h2 { font-size: 34px; } }
@media (max-width: 809px) { .t-h2 { font-size: 23px; line-height: 1.4em; } }

/* Card title (h5) */
.t-card { font-family: var(--f-display); font-weight: 400; color: var(--c-black); font-size: 20px; line-height: 1.3em; }
@media (max-width: 1439px) and (min-width: 1200px) { .t-card { font-size: 24px; } }
@media (max-width: 1199px) and (min-width: 810px)  { .t-card { font-size: 22px; } }
@media (max-width: 809px) { .t-card { font-size: 20px; line-height: 1.5em; } }

/* Price / widget heading (h6) */
.t-h6 { font-family: var(--f-display); font-weight: 400; color: var(--c-black); font-size: 20px; line-height: 1em; }
@media (max-width: 1199px) and (min-width: 810px) { .t-h6 { font-size: 19px; } }
@media (max-width: 809px) { .t-h6 { font-size: 18px; } }

/* Body copy (Arial 16) */
.t-copy { font-family: var(--f-copy); font-weight: 400; font-size: 16px; line-height: 1.3em; color: var(--c-copy); }

/* UI labels */
.t-btn   { font-family: var(--f-ui); font-size: 14px; line-height: 1.2em; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 400; }
.t-nav   { font-family: var(--f-ui); font-size: 15px; line-height: 1.2em; text-transform: uppercase; font-weight: 400; }
.t-badge { font-family: var(--f-ui); font-size: 12px; line-height: 1.2em; text-transform: uppercase; font-weight: 400; }
.t-small { font-family: var(--f-ui); font-size: 12px; line-height: 1.4em; font-weight: 400; }
.t-meta  { font-family: var(--f-ui); font-size: 11px; line-height: 1.4em; font-weight: 400; }

/* ---------- Buttons (pill, stacked-text hover like the original) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  padding: 12px 18px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.btn .btn-text { display: block; position: relative; overflow: hidden; }
.btn .btn-text > span {
  display: block;
  transition: transform 0.45s cubic-bezier(0.44, 0, 0.56, 1);
}
.btn .btn-text > span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}
.btn:hover .btn-text > span:first-child { transform: translateY(-110%); }
.btn:hover .btn-text > span:last-child { transform: translateY(0); }

.btn--primary { background: var(--c-dark); color: var(--c-white); }
.btn--secondary { background: var(--c-beige); color: var(--c-dark); }
.btn--dark-sm { background: var(--c-dark); color: var(--c-white); border-radius: 0; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  pointer-events: none; /* inner elements re-enable */
}
.site-header .header-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 100px;
  margin: 30px var(--gutter) 0;
}
.header-logo { flex: none; }
.header-logo img { width: 175px; height: 63px; object-fit: contain; object-position: left center; }
.header-nav { display: flex; align-items: center; gap: 30px; flex: none; }
.header-nav .nav-item { position: relative; }
.header-nav .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-white);
  padding-bottom: 2px;
  position: relative;
}
.header-nav .nav-link .nav-line {
  position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s ease;
}
.header-nav .nav-link:hover .nav-line { transform: scaleX(1); }
.header-nav .nav-link .chev { transition: transform 0.3s ease; }
.nav-item.open .nav-link .chev { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  background: var(--c-white);
  border-radius: 10px;
  padding: 10px 0;
  min-width: 210px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-item.open .nav-dropdown,
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown a {
  display: block; padding: 9px 22px; color: var(--c-dark);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-dropdown a:hover { color: var(--c-orange); background: var(--c-grey-bg); }

.header-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; flex: none; }
.lang-switch { display: flex; align-items: center; gap: 6px; color: var(--c-white-70); }
.lang-switch a:hover { color: var(--c-white); }

/* Dark header variant (used on inner pages without hero media) */
.site-header--dark .header-nav .nav-link,
.site-header--dark .lang-switch { color: var(--c-text); }
.site-header--dark .lang-switch a:hover { color: var(--c-black); }

/* Mobile header */
.header-menu-btn { display: none; }
@media (max-width: 1199px) {
  .site-header .header-inner { gap: 0; justify-content: space-between; margin-top: 20px; }
  .header-nav, .header-actions { display: none; }
  .header-menu-btn {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--c-white);
  }
  .site-header--dark .header-menu-btn { color: var(--c-text); }
  .header-menu-btn .lines { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; }
  .header-menu-btn .lines span { height: 1.5px; width: 100%; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
  .header-menu-btn.open .lines span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .header-menu-btn.open .lines span:nth-child(2) { opacity: 0; }
  .header-menu-btn.open .lines span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* Mobile menu panel */
.mobile-menu {
  position: fixed; inset: 0; z-index: 39;
  background: var(--c-bg);
  padding: 120px var(--gutter) 40px;
  display: none;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a.mm-link { display: block; padding: 14px 0; border-bottom: 1px solid var(--c-text-45); color: var(--c-text); }
.mobile-menu .mm-sub { padding-left: 16px; }
.mobile-menu .mm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- Property card ---------- */
.prop-card { display: flex; flex-direction: column; gap: 10px; position: relative; }
.prop-card .pc-media {
  position: relative;
  aspect-ratio: 1.53571;
  overflow: hidden;
}
.prop-card .pc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.44, 0, 0.56, 1);
  transform-origin: 80% 50%;
}
.prop-card:hover .pc-media img { transform: scale(1.07); }
.prop-card .pc-cover {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0; transition: opacity 0.4s ease;
  pointer-events: none;
}
.prop-card:hover .pc-cover { opacity: 1; }
.prop-card .pc-badge {
  position: absolute; top: 20px; left: 0;
  background: var(--c-white-60);
  padding: 4px 14px;
  color: var(--c-text);
  backdrop-filter: blur(4px);
}
.prop-card .pc-agent {
  position: absolute; left: 20px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden;
  opacity: 0; transition: opacity 0.4s ease;
}
.prop-card:hover .pc-agent { opacity: 1; }
.prop-card .pc-fav {
  position: absolute; top: 12px; right: 12px;
  padding: 12px; border-radius: 24px;
  color: rgba(255, 255, 255, 0.8);
  z-index: 2;
  transition: color 0.25s ease, transform 0.25s ease;
}
.prop-card .pc-fav:hover { transform: scale(1.1); }
.prop-card .pc-fav.active { color: var(--c-orange); }
.prop-card .pc-fav svg { width: 24px; height: 24px; display: block; }
.prop-card .pc-fav.active svg path { fill: currentColor; }

.prop-card .pc-meta {
  display: flex; align-items: center; gap: 8px;
  color: var(--c-text-70);
  margin-top: 10px;
}
.prop-card .pc-meta .pin { flex: none; display: inline-flex; }
.prop-card .pc-meta .sep { width: 26px; height: 1px; background: var(--c-text-70); }
.prop-card .pc-title { margin-top: 6px; }
.prop-card .pc-desc {
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prop-card .pc-line { height: 1px; background: var(--c-border); margin-top: 14px; }
.prop-card .pc-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.prop-card .pc-feats { display: flex; align-items: center; gap: 20px; color: var(--c-text); }
.prop-card .pc-feats .feat { display: inline-flex; align-items: center; gap: 6px; }
.prop-card .pc-feats svg { width: 16px; height: 16px; opacity: 0.75; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-white); padding: 50px var(--gutter); }
.footer-card {
  background: var(--c-beige-60);
  padding: 60px 60px 50px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}
.footer-logo img { width: 260px; max-width: 100%; }
.footer-sep { width: 1px; align-self: stretch; background: var(--c-text-45); }
.footer-widgets {
  display: flex; gap: 70px; flex-wrap: wrap;
  margin-left: auto;
}
.footer-widget { display: flex; flex-direction: column; gap: 14px; min-width: 120px; }
.footer-widget h6 { color: var(--c-dark); }
.footer-widget a { color: var(--c-text); transition: color 0.2s ease; }
.footer-widget a:hover { color: var(--c-orange); }
.footer-copy {
  background: var(--c-beige-60);
  margin-top: 10px;
  padding: 18px 30px;
  display: flex; align-items: center; gap: 24px;
  color: rgba(67, 63, 56, 0.5);
}
.footer-copy .fc-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--c-text-45);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-dark);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.footer-social a:hover { background: var(--c-dark); color: var(--c-white); border-color: var(--c-dark); }
.footer-social svg { width: 16px; height: 16px; }

@media (max-width: 1199px) {
  .footer-card { flex-direction: column; gap: 40px; padding: 40px 30px; }
  .footer-sep { display: none; }
  .footer-widgets { margin-left: 0; gap: 40px; }
  .footer-copy { flex-direction: column; align-items: flex-start; }
  .footer-copy .fc-actions { margin-left: 0; }
}

/* ---------- Appear animations ---------- */
[data-appear] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.27, 0, 0.51, 1), transform 0.7s cubic-bezier(0.27, 0, 0.51, 1);
  transition-delay: var(--appear-delay, 0s);
  will-change: opacity, transform;
}
[data-appear].appeared { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-appear] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--c-text-45); margin: 0 var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}