/*
Theme Name: JC Media
Theme URI: https://jcmedia.pl
Description: Nakładka (child theme) dla motywu Kadence, przygotowana dla jcmedia.pl. Kolory, typografia i style zgodne z makietami serwisu.
Author: Jacek Ciszak / JC Media
Template: kadence
Version: 1.0.0
Text Domain: jcmedia
*/

/* ==========================================================
   JC MEDIA - design tokens (zgodne z makietami)
   ========================================================== */
:root {
  /* Paleta Kadence - nadpisanie kolorow globalnych */
  --global-palette1: #101B49; /* granat - kolor glowny marki */
  --global-palette2: #4A7DDB; /* blekit - akcent */
  --global-palette3: #232A3F; /* tekst */
  --global-palette4: #6B7385; /* tekst drugorzedny */
  --global-palette5: #E8ECF3; /* linie */
  --global-palette6: #EAF1FA; /* jasny blekit - tla */
  --global-palette7: #FBFCFE; /* papier */
  --global-palette8: #F6F8FB; /* snieg */
  --global-palette9: #FFFFFF; /* biel */

  /* Wlasne zmienne JC Media */
  --jc-navy: #101B49;
  --jc-sky: #4A7DDB;
  --jc-ice: #EAF1FA;
  --jc-ink: #232A3F;
  --jc-grey: #6B7385;
  --jc-line: #E8ECF3;

  color-scheme: light only;
}

/* ==========================================================
   Typografia
   ========================================================== */
body {
  font-family: 'Figtree', sans-serif;
  color: var(--jc-ink);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.site-title, .entry-title {
  font-family: 'Poppins', sans-serif;
  color: var(--jc-navy);
  letter-spacing: -0.01em;
}

/* ==========================================================
   Elementy wspolne
   ========================================================== */
a { transition: color .2s ease; }

.button, .wp-block-button__link, button[type="submit"] {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  border-radius: 100px;
}

/* Etykieta kategorii - kolory jak na makietach */
.jc-cat { 
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--jc-grey);
  display: inline-flex; align-items: center; gap: 8px;
}
.jc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Kolory kategorii bloga - dodawaj kolejne wg wzoru */
.category-podroze .jc-dot,   .jc-dot--podroze   { background: #9A6BD6; }
.category-sprzet .jc-dot,    .jc-dot--sprzet    { background: #E0A63C; }
.category-narty .jc-dot,     .jc-dot--narty     { background: #4A7DDB; }
.category-trekking .jc-dot,  .jc-dot--trekking  { background: #3FA26C; }

/* Ramka "Informacje praktyczne" do wpisow */
.jc-infobox {
  background: var(--global-palette7);
  border: 1px solid var(--jc-line);
  border-radius: 16px;
  padding: 30px 32px;
  margin: 40px 0;
}
.jc-infobox h3 {
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--jc-sky); margin-bottom: 16px;
}

/* Wyrozniony cytat */
.jc-pull, blockquote {
  font-family: 'Poppins', sans-serif;
  font-size: 21px; font-weight: 500; color: var(--jc-navy);
  line-height: 1.5; margin: 36px 0; padding-left: 24px;
  border-left: 2px solid var(--jc-sky);
  font-style: normal;
}

/* ==========================================================
   STRONA GLOWNA - style sekcji (v1.1)
   ========================================================== */

/* --- wspolne dla sekcji --- */
.jc-hero, .jc-stats, .jc-about, .jc-portfolio, .jc-blog {
  padding-left: 24px;
  padding-right: 24px;
}
.jc-hero > *, .jc-stats > *, .jc-about > *,
.jc-portfolio > *, .jc-blog > * {
  max-width: 1080px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* etykieta nad naglowkami sekcji */
.jc-kicker {
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--jc-sky) !important;
  margin-bottom: 8px !important;
}

/* --- HERO --- */
.jc-hero { padding-top: 72px; padding-bottom: 64px; background: #fff; }
.jc-hero h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 10px 0 20px;
}
.jc-lead {
  font-size: 19px !important;
  color: var(--jc-grey) !important;
  max-width: 560px;
  margin-bottom: 28px !important;
}
.jc-hero-photo img { border-radius: 16px; }

/* przyciski */
.jc-btn-navy .wp-block-button__link {
  background: var(--jc-navy);
  color: #fff;
  border-radius: 100px;
  padding: 13px 30px;
  font-size: 15px;
  transition: background .2s ease, transform .15s ease;
}
.jc-btn-navy .wp-block-button__link:hover { background: #1B2B6B; transform: translateY(-1px); }
.jc-btn-line .wp-block-button__link {
  border: 1.5px solid var(--jc-line);
  color: var(--jc-navy);
  background: transparent;
  border-radius: 100px;
  padding: 13px 30px;
  font-size: 15px;
}
.jc-btn-line .wp-block-button__link:hover { border-color: var(--jc-navy); }

/* --- LICZBY --- */
.jc-stats {
  border-top: 1px solid var(--jc-line);
  border-bottom: 1px solid var(--jc-line);
  padding-top: 48px;
  padding-bottom: 48px;
}
.jc-stat-num {
  font-size: 36px !important;
  letter-spacing: -0.02em;
  margin: 0 0 6px !important;
  color: var(--jc-navy);
}
.jc-stat-label {
  font-size: 14px !important;
  color: var(--jc-grey) !important;
  margin: 0 !important;
}

/* --- O MNIE --- */
.jc-about { padding-top: 80px; padding-bottom: 80px; }
.jc-about h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 20px; }
.jc-about-photo img { border-radius: 16px; }
.jc-about a { color: var(--jc-sky); font-family: 'Poppins', sans-serif; font-weight: 500; text-decoration: none; }
.jc-about a:hover { text-decoration: underline; }

/* --- PORTFOLIO --- */
.jc-portfolio {
  background: var(--global-palette7);
  border-top: 1px solid var(--jc-line);
  border-bottom: 1px solid var(--jc-line);
  padding-top: 80px;
  padding-bottom: 80px;
}
.jc-portfolio h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 36px; }
.jc-portfolio .wp-block-columns { gap: 28px; }
.jc-portfolio .wp-block-column {
  background: #fff;
  border: 1px solid var(--jc-line);
  border-radius: 16px;
  overflow: hidden;
  padding-bottom: 24px;
  transition: transform .2s ease, box-shadow .25s ease;
}
.jc-portfolio .wp-block-column:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(16,27,73,.06);
}
.jc-case-img { margin: 0 0 18px !important; }
.jc-case-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.jc-portfolio .wp-block-column h3,
.jc-portfolio .wp-block-column p { padding-left: 22px; padding-right: 22px; }
.jc-case-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--jc-sky) !important;
  margin-bottom: 6px !important;
}
.jc-portfolio h3 { font-size: 18.5px; line-height: 1.4; margin: 0 0 8px; }
.jc-portfolio .wp-block-column > p:last-child { font-size: 15px; color: var(--jc-grey); }

/* --- BLOG --- */
.jc-blog { padding-top: 80px; padding-bottom: 88px; }
.jc-blog h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 36px; }
.jc-blog .wp-block-latest-posts.is-grid { gap: 28px; }
.jc-blog .wp-block-latest-posts li {
  background: #fff;
  border: 1px solid var(--jc-line);
  border-radius: 16px;
  padding: 24px;
  transition: transform .2s ease;
}
.jc-blog .wp-block-latest-posts li:hover { transform: translateY(-4px); }
.jc-blog .wp-block-latest-posts__featured-image img { border-radius: 10px; }
.jc-blog .wp-block-latest-posts li > a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17.5px;
  color: var(--jc-navy);
  text-decoration: none;
  line-height: 1.4;
}
.jc-blog .wp-block-latest-posts__post-date { font-size: 12.5px; color: #A3ABBC; margin-top: 8px; }
.jc-blog .wp-block-latest-posts__post-excerpt { font-size: 14.5px; color: var(--jc-grey); margin-top: 10px; }

/* --- MOBILE --- */
@media (max-width: 781px) {
  .jc-hero { padding-top: 44px; padding-bottom: 40px; }
  .jc-about, .jc-portfolio, .jc-blog { padding-top: 56px; padding-bottom: 56px; }

  /* liczby: 2x2 zamiast jednej kolumny */
  .jc-stats .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px 16px; }
  .jc-stats .wp-block-column { flex: 1 1 42% !important; }

  /* zdjecie w hero pod tekstem, ograniczone */
  .jc-hero-photo { max-width: 320px; }

  /* karty portfolio jedna pod druga z odstepem */
  .jc-portfolio .wp-block-column { margin-bottom: 4px; }
}

/* ==========================================================
   NAGLOWEK / MENU - kolory linkow (v1.2)
   ========================================================== */
.site-header a,
.site-header .main-navigation a,
.site-header .primary-menu-container > ul > li > a,
.main-navigation .menu li a {
  color: var(--jc-navy) !important;
  font-family: 'Poppins', sans-serif;
}
.site-header .main-navigation a:hover,
.main-navigation .menu li a:hover,
.main-navigation .menu li.current-menu-item > a {
  color: var(--jc-sky) !important;
}
.site-branding a, .site-title a { color: var(--jc-navy) !important; }

/* ukrycie podpisow pod zdjeciami hero i o mnie */
.jc-hero-photo figcaption,
.jc-about-photo figcaption { display: none; }

/* ==========================================================
   MOBILE - wzmocnione poprawki (v1.2)
   ========================================================== */
@media (max-width: 781px) {
  .jc-hero h1 { font-size: clamp(30px, 8.5vw, 38px); }
  .jc-lead { font-size: 17px !important; }

  /* kolumny hero i o mnie: jedna pod druga, zdjecie wysrodkowane */
  .jc-hero .wp-block-column,
  .jc-about .wp-block-column { flex-basis: 100% !important; }
  .jc-hero-photo, .jc-about-photo {
    max-width: 340px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .jc-hero-photo img, .jc-about-photo img { width: 100%; }

  /* odstepy sekcji */
  .jc-hero { padding-top: 36px; padding-bottom: 36px; }
  .jc-stats { padding-top: 36px; padding-bottom: 36px; }
  .jc-about, .jc-portfolio, .jc-blog { padding-top: 48px; padding-bottom: 48px; }

  /* naglowki sekcji */
  .jc-about h2, .jc-portfolio h2, .jc-blog h2 { font-size: 26px; }

  /* liczby 2x2 - doprecyzowanie */
  .jc-stats .wp-block-columns { display: flex !important; flex-wrap: wrap !important; }
  .jc-stats .wp-block-column { flex: 1 1 42% !important; margin-bottom: 8px; }
  .jc-stat-num { font-size: 28px !important; }

  /* karty portfolio i blog - odstepy miedzy kartami */
  .jc-portfolio .wp-block-column { margin-bottom: 20px; }
  .jc-blog .wp-block-latest-posts li { margin-bottom: 20px; }

  /* przyciski hero obok siebie, ale zawijalne */
  .jc-hero .wp-block-buttons { gap: 10px; }
}

/* ==========================================================
   GALERIE (v1.3)
   ========================================================== */
/* miniatury galerii we wpisach - rowna siatka, zaokraglenia */
.wp-block-gallery .wp-block-image img {
  border-radius: 10px;
  aspect-ratio: 4/3;
  object-fit: cover;
}
/* strona zbiorcza /galeria/ - karty jak na blogu */
.post-type-archive-galeria article {
  background: #fff;
  border: 1px solid var(--jc-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease;
}
.post-type-archive-galeria article:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(16,27,73,.06);
}