/* ==========================================================================
   Atria Construction — main.css
   :root, reset, typografia, .btn, .container, komponenty współdzielone
   Pliki sekcji: css/components/*.css (header, hero, about, offer, contact, footer)
   ========================================================================== */

:root{
  --cream: #EDE7DE;
  --cream-dark: #D6CCBC;
  --graphite: #33302A;
  --graphite-light: #585550;
  --graphite-deep: #211F1B;
  --white: #FFFFFF;
  --beige: #B4A48A;
  --camel: #A6825A;
  --camel-text: #725D44;

  --header-height: 86px;

  --ink: var(--graphite);
  --ink-soft: rgba(51, 48, 42, 0.68);
  --ink-faint: rgba(51, 48, 42, 0.14);

  --paper-soft: rgba(255, 255, 255, 0.72);
  --paper-faint: rgba(255, 255, 255, 0.14);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1200px;
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --section-pad: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

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

a{ color: inherit; text-decoration: none; }

ul{ margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

p{ margin: 0; }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--graphite);
  color: var(--white);
  padding: 0.8rem 1.2rem;
  z-index: 999;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

:focus-visible{
  outline: 2px solid var(--beige);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ---------- Typographic helpers ---------- */
.eyebrow{
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.eyebrow--dark{ color: var(--camel-text); }

/* Blocksy/Gutenberg dokłada margin-block-start (górny odstęp) na każdym
   nagłówku h1-h6 wewnątrz is-layout-flow/constrained — to samo źródło co
   przy eyebrow. .section-title to wspólna klasa H2 we wszystkich trzech
   sekcjach (O firmie / Oferta / Kontakt), więc jeden !important tutaj
   naprawia odstęp eyebrow->nagłówek we wszystkich naraz. */
.section-title{
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin-top: 0 !important;
  margin-bottom: 1.5rem;
}

.lead{
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-bottom: 1.25rem;
}

.text-link{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--graphite);
  border-bottom: 1px solid var(--ink-faint);
  padding-bottom: 0.35rem;
  transition: border-color .3s var(--ease), gap .3s var(--ease), color .3s var(--ease);
}
.text-link svg{ transition: transform .3s var(--ease); }
.text-link:hover{
  border-color: var(--camel);
  gap: 0.9rem;
}
.text-link:hover svg{ transform: translateX(3px); }

/* ==========================================================================
   BUTTONS — z pełnymi stanami hover / active / focus

   Uwaga: natywny blok Gutenberg "Buttons" nakleja Additional CSS Class(es)
   na zewnętrzny <div class="wp-block-button">, a nie na widoczny
   <a class="wp-block-button__link"> w środku. Dlatego każda reguła niżej
   ma dwa selektory: sam .btn (gdy klasa siedzi bezpośrednio na <a>/<input>,
   tak jak w formularzu CF7) oraz .wp-block-button.btn > .wp-block-button__link
   (gdy klasa siedzi na wrapperze bloku Buttons, tak jak w Hero).
   ========================================================================== */
.btn,
.wp-block-button.btn > .wp-block-button__link{
  --btn-bg: var(--beige);
  --btn-bg-hover: #C4B7A0;
  --btn-bg-active: var(--camel);
  --btn-color: var(--graphite);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  max-width: 100%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border-radius: 3px;
  border: 1px solid transparent !important;
  background: var(--btn-bg) !important;
  color: var(--btn-color) !important;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              transform .18s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
.btn__arrow{ transition: transform .3s var(--ease); }

.btn:hover,
.wp-block-button.btn > .wp-block-button__link:hover{
  background: var(--btn-bg-hover) !important;
  box-shadow: 0 10px 24px -12px rgba(51,48,42,0.35);
}
.btn:hover .btn__arrow{ transform: translateX(4px); }

.btn:active,
.wp-block-button.btn > .wp-block-button__link:active{
  background: var(--btn-bg-active) !important;
  transform: scale(0.97);
  box-shadow: 0 4px 12px -6px rgba(51,48,42,0.35);
}

.btn--sand{
  --btn-bg: var(--beige);
  --btn-bg-hover: #C4B7A0;
  --btn-bg-active: var(--camel);
  --btn-color: var(--graphite);
}

.btn--navy{
  --btn-bg: var(--graphite);
  --btn-bg-hover: var(--graphite-light);
  --btn-bg-active: var(--graphite-deep);
  --btn-color: var(--white);
}

.btn--large,
.wp-block-button.btn--large > .wp-block-button__link{ padding: 1.15rem 2.3rem; font-size: 0.92rem; }
.btn--small,
.wp-block-button.btn--small > .wp-block-button__link{ padding: 0.7rem 1.3rem; font-size: 0.8rem; }
.btn--block,
.wp-block-button.btn--block > .wp-block-button__link{ width: 100%; }

/* ---------- Framed image treatment (współdzielone: About, Oferta) ---------- */
/* Blocksy wymusza width: var(--theme-block-width) na is-layout-constrained,
   framed-image (jako taki blok) łapie to zamiast trzymać 100% swojego
   82%-owego rodzica w Ofercie — stąd !important. */
.framed-image.framed-image{
  position: relative;
  width: 100% !important;
}
.framed-image::before{
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--beige);
  z-index: 0;
}
.framed-image img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.framed-image--sand::before{ border-color: var(--graphite); opacity: 0.35; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 640px){
  :root{ --header-height: 72px; }

  .btn--large{ padding: 1.05rem 1.6rem; font-size: 0.82rem; gap: 0.5rem; }

  .framed-image::before{ inset: 12px -12px -12px 12px; }
}