/* =============================================
   RESPONSIVE — KochajSię.pl
   Mobile-first breakpoints:
   sm  ≤ 600px   (phones)
   md  ≤ 900px   (tablets / landscape phones)
   lg  ≤ 1200px  (small laptops)
   ============================================= */

/* ════════════════════════════════════════════
   GLOBAL: hide mobile-only elements on desktop
   ════════════════════════════════════════════ */

/* Mobile nav drawer and hamburger — hidden by default everywhere,
   shown only inside the @media (max-width: 900px) block below */
.nav-mobile {
     display: none !important;
}

.nav-toggle {
     display: none !important;
}

/* When open on mobile — overridden inside media query */

/* ════════════════════════════════════════════
   GLOBAL RESETS
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .wrap {
          padding-left: 24px;
          padding-right: 24px;
     }

     .wrap-sm {
          padding-left: 24px;
          padding-right: 24px;
     }
}

@media (max-width: 600px) {
     .wrap {
          padding-left: 16px;
          padding-right: 16px;
     }

     .wrap-sm {
          padding-left: 16px;
          padding-right: 16px;
     }

     html {
          font-size: 15px;
     }
}

/* ════════════════════════════════════════════
   HEADER / NAV
   ════════════════════════════════════════════ */
@media (max-width: 900px) {

     .hdr-in {
          position: relative;
          padding: 0 24px;
          height: 62px;
     }

     /* Hide desktop nav + CTA button by default */
     .nav,
     .hcta {
          display: none;
     }

     /* Hamburger button */
     .nav-toggle {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 5px;
          width: 36px;
          height: 36px;
          background: none;
          border: none;
          cursor: pointer;
          margin-left: auto;
          padding: 4px;
          z-index: 200;
     }

     .nav-toggle span {
          display: block;
          height: 1.5px;
          background: var(--ink);
          border-radius: 2px;
          transition: transform .3s ease, opacity .25s;
     }

     /* Open state — X icon */
     .nav-toggle.open span:nth-child(1) {
          transform: translateY(6.5px) rotate(45deg);
     }

     .nav-toggle.open span:nth-child(2) {
          opacity: 0;
          transform: scaleX(0);
     }

     .nav-toggle.open span:nth-child(3) {
          transform: translateY(-6.5px) rotate(-45deg);
     }

     /* Mobile nav drawer */
     .nav-mobile {
          display: none !important;
          flex-direction: column;
          position: fixed;
          inset: 62px 0 0 0;
          background: rgba(255, 255, 255, .97);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          padding: 32px 28px 40px;
          z-index: 150;
          overflow-y: auto;
          gap: 0;
          border-top: 1px solid rgba(212, 86, 106, .1);
     }

     .nav-mobile.open {
          display: flex !important;
     }

     /* Show hamburger on mobile */
     .nav-toggle {
          display: flex !important;
     }

     .nav-mobile a {
          font-family: var(--serif);
          font-size: 28px;
          font-weight: 700;
          color: var(--ink);
          text-decoration: none;
          padding: 18px 0;
          border-bottom: 1px solid rgba(212, 86, 106, .08);
          transition: color .2s;
     }

     .nav-mobile a:last-child {
          border-bottom: none;
     }

     .nav-mobile a:hover,
     .nav-mobile a.on {
          color: var(--r5);
     }

     .nav-mobile .nav-cta-m {
          margin-top: 28px;
          font-family: var(--sans);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: .08em;
          text-transform: uppercase;
          color: #fff;
          background: var(--r5);
          border-radius: 100px;
          padding: 16px 32px;
          text-align: center;
          border-bottom: none;
     }
}

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .hero-section {
          min-height: auto !important;
          padding-top: 48px !important;
          padding-bottom: 340px !important;
     }

     /* lineart illustration — moved to bottom right */
     .hero-section>div:first-child>div {
          top: auto !important;
          bottom: -20px !important;
          right: -20px !important;
          width: 80% !important;
          height: 340px !important;
          opacity: .7 !important;
     }

     .t-hero {
          font-size: clamp(38px, 10vw, 58px) !important;
     }

     .lead {
          font-size: 17px !important;
     }
}

@media (max-width: 600px) {
     .hero-section {
          padding-bottom: 280px !important;
     }

     .hero-section>div:first-child>div {
          width: 100% !important;
          height: 280px !important;
          right: -8px !important;
          bottom: -10px !important;
     }

     .t-hero {
          font-size: clamp(32px, 9vw, 46px) !important;
     }
}

/* ════════════════════════════════════════════
   CATEGORY GRID 2×2
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .cat-section {
          padding: 48px 0 64px;
     }

     .cat-grid-2x2 {
          grid-template-columns: 1fr !important;
          gap: 20px !important;
          padding: 0 !important;
     }

     /* Remove odd/even offset on mobile */
     .cat-grid-2x2>.cat-tile:nth-child(even) {
          transform: none !important;
     }

     .cat-tile {
          height: 240px !important;
     }

     .cat-tile-name {
          font-size: 26px !important;
     }

     /* Always show CTA label on mobile (no hover) */
     .cat-tile-cta {
          opacity: 1 !important;
          transform: none !important;
     }
}

@media (max-width: 600px) {
     .cat-tile {
          height: 220px !important;
     }
}

/* ════════════════════════════════════════════
   ARTICLES GRID
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .arts-grid-4 {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !important;
     }

     .arts-grid-4 .card {
          width: 100% !important;
     }

     .art-feat .card-img {
          height: 240px !important;
     }

     .art-stack1 .card-img,
     .art-tall .card-img {
          height: 180px !important;
     }
}

/* ════════════════════════════════════════════
   TEAM / EXPERTS
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .team-grid {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 32px !important;
     }

     .team-member:nth-child(even) {
          transform: none !important;
     }

     .team-avatar {
          width: 160px !important;
          height: 160px !important;
     }
}

@media (max-width: 600px) {
     .team-grid {
          grid-template-columns: 1fr !important;
          max-width: 300px !important;
          margin: 0 auto !important;
     }
}

/* ════════════════════════════════════════════
   TRUST STRIP
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
     .trust {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 24px !important;
          justify-items: center;
     }

     /* Hide vertical dividers on 2-col grid */
     .trust>div[style*="width:1px"] {
          display: none !important;
     }
}

/* ════════════════════════════════════════════
   FAQ GRID
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .faq-grid {
          grid-template-columns: 1fr !important;
          gap: 40px !important;
          padding: 0 24px !important;
     }
}

@media (max-width: 600px) {
     .faq-grid {
          padding: 0 16px !important;
     }

     .faq-q {
          font-size: 17px !important;
     }
}

/* ════════════════════════════════════════════
   MANIFESTO
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
     .manifesto-q {
          font-size: 22px !important;
     }
}

/* ════════════════════════════════════════════
   NEWSLETTER
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .nl-card {
          padding: 40px 24px !important;
          border-radius: 24px !important;
     }

     .nl-inner {
          grid-template-columns: 1fr !important;
          gap: 32px !important;
     }

     .nl-title {
          font-size: clamp(28px, 6vw, 40px) !important;
     }
}

@media (max-width: 600px) {
     .nl-section {
          padding: 40px 0 !important;
     }

     .nl-row {
          flex-direction: column !important;
          gap: 10px !important;
     }

     .nl-btn {
          width: 100% !important;
     }
}

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .ftr-grid {
          grid-template-columns: 1fr 1fr !important;
          gap: 36px 24px !important;
     }

     .ftr-grid>div:first-child {
          grid-column: 1 / -1;
     }
}

@media (max-width: 600px) {
     .ftr-grid {
          grid-template-columns: 1fr !important;
          gap: 28px !important;
     }

     .ftr-bottom {
          flex-direction: column !important;
          gap: 8px !important;
          text-align: center !important;
     }
}

/* ════════════════════════════════════════════
   BLOG PAGE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .blog-grid {
          grid-template-columns: 1fr 1fr !important;
          gap: 20px !important;
     }

     .blog-feat {
          grid-column: 1 / -1 !important;
     }

     .blog-feat .card-img {
          height: 260px !important;
     }
}

@media (max-width: 600px) {
     .blog-grid {
          grid-template-columns: 1fr !important;
     }
}

/* ════════════════════════════════════════════
   POST PAGE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .post-layout {
          grid-template-columns: 1fr !important;
          gap: 40px !important;
     }

     .post-sidebar {
          position: static !important;
     }
}

/* ════════════════════════════════════════════
   KATEGORIA PAGE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .cluster-grid {
          grid-template-columns: 1fr 1fr !important;
          gap: 14px !important;
     }
}

@media (max-width: 600px) {
     .cluster-grid {
          grid-template-columns: 1fr !important;
     }
}

/* ════════════════════════════════════════════
   O NAS PAGE — team grid (reuses .team-grid)
   ════════════════════════════════════════════ */
@media (max-width: 900px) {

     /* About page 2-col manifesto layout */
     section .wrap>div[style*="grid-template-columns:1fr 1fr"] {
          display: flex !important;
          flex-direction: column !important;
          gap: 40px !important;
     }
}

/* ════════════════════════════════════════════
   BIO PAGE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .bio-hero {
          grid-template-columns: 1fr !important;
          gap: 32px !important;
          padding: 32px 0 48px !important;
     }

     .bio-avatar-wrap {
          position: static !important;
          max-width: 280px !important;
          margin: 0 auto !important;
     }

     .bio-avatar {
          aspect-ratio: 1 / 1 !important;
          border-radius: 50% !important;
     }
}

/* ════════════════════════════════════════════
   SECTION HEADINGS & SPACING
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .sec {
          padding: 56px 0 !important;
     }

     .t-lg {
          font-size: clamp(28px, 5vw, 44px) !important;
     }

     .mb48 {
          margin-bottom: 32px !important;
     }

     .mb64 {
          margin-bottom: 40px !important;
     }
}

@media (max-width: 600px) {
     .sec {
          padding: 40px 0 !important;
     }

     .t-lg {
          font-size: clamp(26px, 6vw, 36px) !important;
     }
}

/* ════════════════════════════════════════════
   BUTTON SIZING ON MOBILE
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
     .btn {
          padding: 14px 28px !important;
          font-size: 12px !important;
     }

     /* Stack hero CTAs */
     .hero-section .wrap>div>div>div[style*="flex"] {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 14px !important;
     }
}

/* ════════════════════════════════════════════
   CARD IMAGES — prevent overflow on mobile
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
     .card-img {
          min-height: 180px !important;
     }

     .card-body {
          padding: 20px !important;
     }

     .card-title {
          font-size: 18px !important;
     }
}

/* ════════════════════════════════════════════
   SIDEBAR (nl-sm / smaller widgets)
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
     .nl-sm {
          flex-direction: column !important;
          gap: 8px !important;
     }

     .nl-sm input {
          width: 100% !important;
          border-radius: 10px !important;
     }

     .nl-sm button {
          width: 100% !important;
          border-radius: 10px !important;
     }
}

/* ════════════════════════════════════════════
   TOUCH — always show cat CTA on touch devices
   ════════════════════════════════════════════ */
@media (hover: none) {
     .cat-tile-cta {
          opacity: 1 !important;
          transform: none !important;
     }

     .team-avatar:hover {
          transform: none !important;
          box-shadow: none !important;
     }
}