/* ELPIDA Kraków – standalone landing page (reproduction of the approved Canva Hub) */

@font-face {
  font-family: "ELPIDA Display";            /* Fraunces (SIL OFL 1.1), static 500 / opsz 144 – stand-in for The Seasons */
  src: url("../fonts/fraunces-display-500.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";                 /* SIL OFL 1.1 */
  src: url("../fonts/montserrat-400-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --text: #705330;          /* hero title/subtitle + CONTACT label (as live Hub) */
  --text-deep: #5C4029;     /* all text from Experience downwards (as live Hub) */
  --book: #835429;          /* primary CTA */
  --book-text: #ffffff;
  --contact: #EEE1D2;       /* secondary CTA */
  --contact-text: #705330;
  --paper: #F1EDE7;
  --radius: 22px;
  --display: "ELPIDA Display", Georgia, "Times New Roman", serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  background-color: var(--paper);
  background-image: url("../images/paper-tile.webp");
  background-size: 800px 800px;
  font-family: var(--body);
  font-weight: 400;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

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

main { max-width: 1100px; margin: 0 auto; overflow-x: hidden; }

section { padding: 0 16px; }

h1, h2, .rating {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: 2.15rem; }                       /* ~34px */
h2 { font-size: 2rem; }                          /* ~32px */

.subtitle, .body, .award, footer p {
  font-family: var(--body);
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.45rem;                            /* ~23px */
  line-height: 1.1;
  letter-spacing: 0.005em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease;
}
.btn:hover, .btn:focus-visible { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.btn-primary { background: var(--book); color: var(--book-text); }
.btn-secondary {
  background: var(--contact);
  color: var(--contact-text);
  font-size: 1.15rem;                            /* ~18px – clearly secondary */
  min-height: 44px;
  padding: 8px 18px;
}

.photo { border-radius: var(--radius); }

/* 1. HERO */
.hero { padding-top: 28px; padding-bottom: 52px; }
.logo { width: 140px; height: 140px; margin: 0 auto 12px; }
.hero h1 { margin-bottom: 6px; }
.subtitle { font-size: 1.2rem; line-height: 1.35; margin-bottom: 16px; }   /* ~19px */
.hero .btn { margin-bottom: 14px; }
.hero-photo { width: 100%; max-width: 760px; margin: 0 auto; }

/* Live Hub uses the deeper brown for every section after the hero */
.experience, .trust, .krakow, .final { color: var(--text-deep); }

/* 2. EXPERIENCE */
.experience { padding-bottom: 40px; }
.experience h2 { margin-bottom: 10px; }
.body { font-size: 1.15rem; line-height: 1.6; max-width: 34em; margin: 0 auto 14px; }   /* ~18px */
.pair { display: grid; gap: 12px; justify-items: center; }
.pair .photo { width: 100%; max-width: 330px; }

/* 3. TRUST */
.trust { padding-bottom: 46px; }
.rating { font-size: 2.15rem; margin-bottom: 8px; }
.award { font-size: 1.25rem; line-height: 1.4; }

/* 4. KRAKÓW */
.krakow { padding-bottom: 46px; }
.krakow h2 { margin-bottom: 14px; }
.krakow-photo { width: 100%; max-width: 360px; margin: 0 auto; }

/* 5. FINAL */
.final { display: flex; flex-direction: column; align-items: center; padding-bottom: 36px; }
.final h2 { margin-bottom: 14px; }
.final .btn-primary { margin-bottom: 12px; }
footer { margin-top: 30px; }
footer p { font-family: var(--display); font-size: 1.05rem; line-height: 1.45; }

/* Tablet & desktop */
@media (min-width: 768px) {
  :root { --radius: 32px; }
  h1 { font-size: 3rem; }
  h2 { font-size: 2.8rem; }
  .logo { width: 180px; height: 180px; margin-bottom: 18px; }
  .hero { padding-top: 40px; padding-bottom: 80px; }
  .subtitle { font-size: 1.5rem; margin-bottom: 22px; }
  .btn { font-size: 1.8rem; min-height: 58px; padding: 12px 30px; }
  .btn-secondary { font-size: 1.4rem; min-height: 50px; }
  .hero .btn { margin-bottom: 26px; }
  .body { font-size: 1.35rem; margin-bottom: 26px; }
  .pair { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; align-items: center; gap: 18px; }
  .pair .photo { max-width: 340px; }
  .experience { padding-bottom: 70px; }
  .rating { font-size: 3.1rem; }
  .award { font-size: 1.6rem; }
  .trust { padding-bottom: 70px; }
  .krakow-photo { max-width: 420px; }
  .krakow { padding-bottom: 70px; }
  footer p { font-size: 1.3rem; }
}