/* Shared baseline for the rebuilt sites (apartmanirakic, ortotim).
   Reset + design tokens + common components. Each site layers its own palette
   and page styles on top by overriding the --brand-* custom properties. */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }

/* ---- design tokens (defaults; sites override --brand-*) ---- */
:root {
  --brand:        #1f6f78;
  --brand-dark:   #12474d;
  --brand-accent: #e8a04b;
  --ink:          #1a1a1a;
  --ink-soft:     #52525b;
  --line:         #e6e3dd;
  --bg:           #ffffff;
  --bg-soft:      #faf8f4;
  --bg-contrast:  #12474d;

  --maxw: 1120px;
  --gap: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 14px;
  --shadow: 0 6px 24px rgba(20, 40, 45, 0.10);
  --shadow-lg: 0 18px 48px rgba(20, 40, 45, 0.16);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.3vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
  --step-4:  clamp(2.6rem, 2rem + 3.2vw, 4.3rem);
}

/* ---- base type ---- */
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--bg);
}
h1 { font-family: var(--font-head); font-size: var(--step-4); }
h2 { font-family: var(--font-head); font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { color: var(--ink-soft); }
p + p { margin-top: 0.9em; }

/* ---- layout helpers ---- */
.wrap { width: min(100% - 2 * var(--gap), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--bg-contrast); color: #fff; }
.section--dark p { color: rgba(255,255,255,0.82); }
.stack > * + * { margin-top: 1rem; }
.grid { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.lead { font-size: var(--step-1); color: var(--ink-soft); }
.center { text-align: center; }
.measure { max-width: 62ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.8em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--accent { background: var(--brand-accent); color: #1a1a1a; }
.btn--ghost { border-color: currentColor; }

/* ---- header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.brand-mark { font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); text-decoration: none; color: var(--ink); letter-spacing: -0.03em; }
.nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.nav a { text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: var(--step--1); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand); }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.5rem; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gap) 1rem;
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  }
  .nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
  .site-header.open .nav { max-height: 80vh; }
  .site-header .btn { display: none; }
  .site-header.open .btn { display: inline-flex; margin-top: 0.75rem; }
}

/* ---- footer ---- */
.site-footer { background: var(--bg-contrast); color: rgba(255,255,255,0.85); padding-block: clamp(2.5rem, 6vw, 4rem); }
.site-footer a { color: #fff; }
.site-footer h3 { color: #fff; margin-bottom: 0.5rem; }
.footer-cols { display: grid; gap: 2rem; }
@media (min-width: 700px) { .footer-cols { grid-template-columns: 2fr 1fr 1fr; } }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: var(--step--1); color: rgba(255,255,255,0.6); }

/* ---- cards ---- */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__body { padding: 1.25rem 1.4rem 1.5rem; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ---- gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.gallery img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; border-radius: 8px; }

/* ---- forms ---- */
.form { display: grid; gap: 1rem; max-width: 34rem; }
.form label { font-weight: 600; font-size: var(--step--1); display: block; margin-bottom: 0.35rem; }
.form input, .form textarea, .form select {
  width: 100%; padding: 0.7em 0.85em;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.form textarea { resize: vertical; min-height: 8rem; }
/* honeypot — visually removed, still in the DOM for bots to trip on */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ok  { color: #15803d; font-weight: 600; }
.form-err { color: #b91c1c; font-weight: 600; }

/* ---- misc ---- */
.hero { position: relative; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }