/*
Theme Name: Diana Petrova
Theme URI: https://dianapetrova.pl
Author: Diana Petrova
Author URI: https://dianapetrova.pl
Description: Jednostronicowy motyw wizytówka dla Diany Petrovej — doradztwo finansowe. Elegancki design (Cormorant Garamond + Inter), sekcja hero, proces współpracy i formularz kontaktowy. Wbudowane SEO + warstwa AI/GEO (Open Graph, Twitter Card, JSON-LD).
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diana-petrova
Tags: one-page, business, portfolio, custom-colors, translation-ready
*/

/* ---- Reset / bazowe ---- */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', sans-serif;
  color: #1d2733;
  background: #e8eef6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
input:focus, textarea:focus, button:focus {
  outline: 2px solid rgba(42,90,142,.35);
  outline-offset: 2px;
}

/* ---- Pomocnicze animacje linków nawigacji ---- */
nav a:hover { color: #0d1f38; }

/* ---- Ekran potwierdzenia formularza ---- */
.dp-form-success {
  display: none;
  background: #fff;
  padding: 56px 48px;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(13,31,56,0.08);
  border: 1px solid rgba(42,90,142,0.15);
  text-align: center;
}
.dp-form-success .dp-check {
  width: 64px; height: 64px; margin: 0 auto 24px;
  border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 32px;
}
.dp-form-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: 32px; color: #0d1f38; margin: 0 0 12px;
}
.dp-form-success p {
  font-size: 15px; line-height: 1.7; color: #5a7a9e; margin: 0 auto; max-width: 380px;
}

/* ====================================================================
   RESPONSYWNOŚĆ — tablet i mobile
   (reguły z !important, bo layout bazuje na stylach inline)
   ==================================================================== */

/* ---- TABLET (≤ 1024px) ---- */
@media (max-width: 1024px) {
  nav { padding: 22px 40px !important; }
  .dp-hero { padding: 56px 40px 90px !important; gap: 48px !important; }
  section > div[style*="max-width:1280px"],
  section > div[style*="max-width: 1280px"] { padding-left: 40px !important; padding-right: 40px !important; }
  .dp-hero h1 { font-size: 54px !important; }
  .dp-sec2-head { gap: 40px !important; }
  .dp-pillars { padding: 40px !important; }
}

/* ---- TABLET WĄSKI / DUŻY TELEFON (≤ 820px) ---- */
@media (max-width: 820px) {
  /* Nawigacja w kolumnie i wyśrodkowana */
  nav { flex-direction: column !important; gap: 18px !important; padding: 22px 28px !important; text-align: center; }
  nav > div { justify-content: center !important; }

  /* Wszystkie dwu/trzykolumnowe siatki -> jedna kolumna */
  .dp-hero,
  .dp-sec2-head,
  .dp-contact-grid,
  .dp-steps,
  .dp-grid { display: block !important; }
  .dp-hero > div,
  .dp-sec2-head > *,
  .dp-contact-grid > div,
  .dp-grid > label { width: 100% !important; }

  /* Odstępy między elementami po zwinięciu do kolumny */
  .dp-hero > div:first-child { margin-bottom: 56px !important; }
  .dp-sec2-head > div { margin-bottom: 24px !important; }
  .dp-contact-grid > div:first-child { margin-bottom: 48px !important; }
  .dp-grid > label { margin-bottom: 24px !important; }

  /* Kroki 01/02/03 jeden pod drugim */
  .dp-steps { grid-template-columns: 1fr !important; }
  .dp-steps > div { border-bottom: 1px solid rgba(13,31,56,0.08); }

  /* Filary: pojedyncza kolumna + wewnętrzna siatka 2 kol. */
  .dp-pillars { grid-template-columns: 1fr !important; gap: 32px !important; padding: 36px 28px !important; }

  /* Sekcje: mniejszy padding pionowy/boczny */
  section[id="jak-pracuje"] > div,
  section[id="kontakt"] > div { padding: 72px 28px !important; }
  .dp-hero { padding: 40px 28px 72px !important; }

  /* Typografia */
  .dp-hero h1 { font-size: 46px !important; }
  h2 { font-size: 36px !important; }

  /* Zdjęcie hero: rozsądny format, cytat wraca do środka (nie wystaje) */
  .dp-hero > div:last-child > div:first-child { aspect-ratio: 3/4 !important; max-height: 520px; }
  .dp-hero > div:last-child > div:last-child {
    position: static !important;
    margin: 20px 8px 0 !important;
    max-width: none !important;
  }
}

/* ---- TELEFON (≤ 560px) ---- */
@media (max-width: 560px) {
  nav { padding: 20px 20px !important; }
  nav > div:last-child { gap: 22px !important; font-size: 13px !important; }

  .dp-hero { padding: 32px 20px 56px !important; }
  section[id="jak-pracuje"] > div,
  section[id="kontakt"] > div { padding: 56px 20px !important; }

  .dp-hero h1 { font-size: 38px !important; }
  h2 { font-size: 30px !important; }
  .dp-hero p { font-size: 16px !important; }

  /* CTA na całą szerokość, jeden pod drugim */
  .dp-hero > div:first-child > div[style*="display:flex; gap:16px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .dp-hero > div:first-child > div[style*="display:flex; gap:16px"] a { justify-content: center; }

  /* Statystyki hero: zawijają się */
  .dp-hero > div:first-child > div[style*="gap:48px"] { flex-wrap: wrap !important; gap: 28px !important; }

  /* Formularz: mniejszy padding, pola w jednej kolumnie */
  #dp-contact-form { padding: 32px 24px !important; }
  .dp-grid { display: block !important; }

  .dp-form-success { padding: 40px 24px !important; }

  /* Stopka w kolumnie */
  footer > div { flex-direction: column !important; text-align: center; gap: 14px !important; }

  /* Filary: wewnętrzna siatka też jednokolumnowa */
  .dp-pillars > div:last-child { grid-template-columns: 1fr !important; gap: 16px !important; }
}