/* =============================================
   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;
}

.mobile-only {
     display: none !important;
}

.desktop-only {
     display: block;
}

@media (max-width: 900px) {
     .mobile-only {
          display: block !important;
     }
     .desktop-only {
          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: 24px;
          padding-right: 24px;
     }

     .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 !important;
     }

     /* 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 - Premium Look */
     .nav-mobile {
          display: none !important;
          flex-direction: column;
          position: fixed;
          inset: 62px 0 0 0;
          background: rgba(253, 240, 242, 0.98); /* Dopasowane do header var(--warm) z blurem */
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          padding: 32px 32px 48px;
          z-index: 150;
          overflow-y: auto;
          gap: 0;
          border-top: 1px solid rgba(212, 86, 106, 0.08);
     }

     @keyframes navSlideDown {
          0% {
               opacity: 0;
               transform: translateY(-8px);
          }
          100% {
               opacity: 1;
               transform: translateY(0);
          }
     }

     .nav-mobile.open {
          display: flex !important;
          animation: navSlideDown 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
     }

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

     .nav-mobile-list {
          list-style: none;
          padding: 0;
          margin: 0;
          width: 100%;
     }

     .nav-mobile-list > li {
          position: relative;
          border-bottom: 1px solid rgba(212, 86, 106, 0.1);
     }

     .nav-mobile-list > li:last-child {
          border-bottom: none;
     }

     .nav-mobile-list a {
          font-family: var(--serif);
          font-size: 28px;
          font-weight: 700;
          color: var(--ink);
          text-decoration: none;
          padding: 18px 0;
          display: block;
          transition: color 0.3s ease, transform 0.3s ease;
          letter-spacing: -0.01em;
     }

     .nav-mobile-list .sub-toggle {
          position: absolute;
          right: -8px;
          top: 4px;
          height: 60px;
          width: 60px;
          background: none;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--r5);
          cursor: pointer;
          transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s ease;
          appearance: none;
          -webkit-appearance: none;
          outline: none;
     }

     .nav-mobile-list .sub-toggle svg {
          transition: transform 0.3s;
     }

     .nav-mobile-list li.is-open > .sub-toggle {
          color: var(--r4);
     }

     .nav-mobile-list li.is-open > .sub-toggle svg {
          transform: rotate(180deg);
     }

     @keyframes subSlideDown {
          0% {
               opacity: 0;
               transform: translateY(-4px);
          }
          100% {
               opacity: 1;
               transform: translateY(0);
          }
     }

     .sub-menu-mobile {
          list-style: none;
          padding: 8px 16px;
          margin: 12px 0 0 0;
          display: none;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 16px;
          border: 1px solid rgba(212, 86, 106, 0.05);
     }

     .nav-mobile-list li.is-open > .sub-menu-mobile {
          display: block;
          animation: subSlideDown 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
     }

     .sub-menu-mobile a {
          font-family: var(--serif);
          font-size: 20px;
          font-weight: 500;
          padding: 14px 12px;
          border-bottom: 1px solid rgba(212, 86, 106, 0.05);
          opacity: 0.9;
          display: block;
     }
     
     .sub-menu-mobile li:last-child a {
          border-bottom: none;
     }

     .sub-menu-mobile a .m-title {
          display: block;
          font-family: var(--serif);
          font-size: 20px;
          font-weight: 700;
          color: var(--ink);
          margin-bottom: 4px;
     }

     .sub-menu-mobile a .m-desc {
          display: block;
          font-family: var(--sans);
          font-size: 12.5px;
          font-weight: 500;
          color: var(--ink2);
          opacity: 0.65;
          text-transform: none;
          letter-spacing: 0;
          line-height: 1.4;
     }

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

     .sub-menu-mobile a:hover,
     .sub-menu-mobile a.on {
          opacity: 1;
     }

     .nav-mobile .nav-cta-m {
          margin-top: 40px;
          font-family: var(--sans);
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: #fff;
          background: var(--r5);
          border-radius: 100px;
          padding: 16px 32px;
          text-align: center;
          align-self: center;
          width: 100%;
          border-bottom: none;
          box-shadow: 0 8px 24px rgba(212, 86, 106, 0.25);
          transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
     }

     .nav-mobile .nav-cta-m:hover {
          background: var(--r6);
          transform: translateY(-2px);
          box-shadow: 0 12px 28px rgba(212, 86, 106, 0.3);
     }
}

/* -------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
     .cat-hero-section {
          padding-top: 86px !important;
          padding-bottom: 48px !important;
     }

     .hero-section {
          min-height: auto !important;
          padding-top: 86px !important; /* Powiększony odstęp pod headerem na mobile */
          padding-bottom: 48px !important;
          overflow: hidden !important;
     }

     .hero-section .wrap {
          padding-top: 20px; /* Dodatkowe powietrze w wrapie, zgodnie ze screenem */
     }

     /* Hide color blobs on mobile - only lineart remains */
     .hero-section>div:first-child>div:nth-of-type(1),
     .hero-section>div:first-child>div:nth-of-type(2) {
          display: none !important;
     }

     /* Lineart woman as background to the right of H1 */
     .hero-section>div:first-child>div:nth-of-type(3) {
          top: 0 !important;
          bottom: auto !important;
          right: -70px !important;
          width: 100% !important;
          height: 500px !important;
          opacity: .25 !important;
          background-position: right top !important;
          z-index: 0 !important;
     }

     .hero-section video {
          object-position: right top !important;
     }

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

     .hero-grid {
          text-align: center !important;
          margin: 0 auto !important;
     }

     .hero-kicker {
          justify-content: center !important;
     }

     .lead {
          font-size: 17px !important;
          margin-left: auto !important;
          margin-right: auto !important;
     }

     /* Category Hero Fixes */
     .cat-hero-grid {
          grid-template-columns: 1fr !important;
          text-align: center !important;
          gap: 24px !important;
     }

     .cat-hero-img {
          height: 280px !important;
          order: -1; /* Image above text on mobile kategoria */
     }

     .cat-hero-section .lead {
          margin: 0 auto !important;
     }

     /* Blog & O Nas Hero Fixes (mesh-b, mesh-c) */
     section.mesh-b,
     section.mesh-c {
          padding: 48px 0 !important;
          text-align: center !important;
     }

     section.mesh-b .lead,
     section.mesh-c .lead,
     section.mesh-c p {
          margin-left: auto !important;
          margin-right: auto !important;
          text-align: center !important;
     }
}

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

     .hero-section>div:first-child>div:nth-of-type(3) {
          height: 400px !important;
          right: -74px !important;
          opacity: .15 !important;
     }

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

/* ════════════════════════════════════════════
   CATEGORY GRID 2Ă—2
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .cat-section {
          padding: 48px 0 64px !important;
          overflow: hidden !important;
     }

     .cat-intro {
          text-align: center !important;
          padding-top: 40px !important;
     }

     .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: auto !important;
          min-height: 240px;
          display: flex;
          align-items: flex-end;
     }

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

     .cat-tile-body {
          position: relative !important;
          z-index: 2 !important;
          padding: 20px !important;
          width: 100% !important;
     }

     .cat-lineart {
          position: absolute !important;
          right: -27px !important;
          top: -15% !important;
          bottom: -7% !important;
          height: 120% !important;
          width: 71% !important;
          background-size: contain !important;
          background-position: right center !important;
          background-repeat: no-repeat !important;
          opacity: 0.4 !important;
          z-index: 1 !important;
          transition: transform 0.5s ease !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: auto !important;
           min-height: 220px;
      }
}

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

     /* Center section header in Blog & Global Lists */
     .sec-hdr-flex,
     .sec .wrap > .flex-between {
          flex-direction: column !important;
          align-items: center !important;
          text-align: center !important;
          margin-bottom: 32px !important;
     }

     .sec-hdr-flex > div {
          text-align: center !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
     }
     
     .filter-bar {
          justify-content: center !important;
          margin: 16px auto 0 !important;
          width: 100% !important;
     }

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

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

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

     .art-right-stack {
          display: flex !important;
          flex-direction: column !important;
          gap: 20px !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;
          text-align: center !important;
     }

     .team-member {
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          transform: none !important;
     }

     .team-avatar {
          margin: 0 auto 20px !important;
     }
}

/* ════════════════════════════════════════════
   TRUST STRIP
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
     .trust {
          display: grid !important;
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 32px 0 !important;
          justify-items: center;
          text-align: center;
          max-width: 300px;
          margin: 0 auto;
     }

     /* Reset any child column spans */
     .trust > div {
          grid-column: auto !important;
          flex: none !important;
          width: 100% !important;
     }

     /* Hide vertical dividers on mobile 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;
          text-align: center !important;
     }

     .faq-grid .divider {
          margin-left: auto !important;
          margin-right: auto !important;
     }

     .faq-grid .btn-g {
          margin: 0 auto !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: 0 !important;
          border-radius: 20px !important;
          width: 100% !important;
          max-width: 100% !important;
          box-sizing: border-box !important;
     }
 
     .nl-inner {
          grid-template-columns: 1fr !important;
          padding: 40px 20px !important;
          gap: 32px !important;
          text-align: center !important;
          width: 100% !important;
          box-sizing: border-box !important;
     }

     .nl-perk {
          justify-content: center !important;
     }

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

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

     .nl-inner {
          padding: 32px 16px !important;
     }

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

     .nl-input {
          width: 100% !important;
          box-sizing: border-box !important;
     }

     .nl-btn {
          width: 100% !important;
          padding: 16px 20px !important;
          height: auto !important;
     }

     /* Footer Newsletter Fix */
     .nl-sm {
          flex-direction: column !important;
          gap: 10px !important;
     }

     .nl-sm input {
          width: 100% !important;
          box-sizing: border-box !important;
     }

     .nl-sm button {
          width: 100% !important;
          padding: 14px 20px !important;
          font-size: 13px !important;
          height: auto !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 !important;
          gap: 32px !important;
     }

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

     .blog-feat .card-img {
          width: 100% !important;
          height: 260px !important;
          min-height: auto !important;
     }

     .blog-feat .card-body {
          width: 100% !important;
          padding: 24px !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;
     }

     /* Post Page Mobile Refinements */
     .author-btn-top {
          background: var(--r1);
          color: var(--r5);
          border: 1px solid var(--r2);
          padding: 8px 16px;
          border-radius: 100px;
          font-family: var(--sans);
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          text-decoration: none;
          letter-spacing: 0.05em;
          transition: all 0.2s ease;
          margin-left: auto;
          white-space: nowrap;
     }

     .read-time-tag {
          background: rgba(212, 86, 106, 0.1);
          padding: 3px 10px;
          border-radius: 6px;
          color: var(--r5);
          font-weight: 600;
          display: inline-block;
          margin-left: 4px;
     }

     .post-body {
          padding: 0 10px; /* Base padding */
     }
}

@media (max-width: 600px) {
     .post-layout article {
          padding-left: 0;
          padding-right: 0;
     }
     
     .author-meta-block {
          flex-wrap: wrap;
          gap: 16px !important;
     }
     
     .author-btn-top {
          margin-left: 0 !important;
          width: 100%;
          text-align: center;
          padding: 12px;
          font-size: 12px;
     }

     .meta-details {
          line-height: 1.6;
     }

     /* Mobile TOC specific */
     .sidebar-w.mobile-only {
          margin-bottom: 32px;
          background: var(--warm);
          padding: 24px;
          border-radius: 20px;
     }

     /* Mobile Newsletter specific - match dark red from image */
     .sidebar-w.mesh-dark.mobile-only {
          margin-top: 40px;
          padding: 32px 24px;
          border-radius: 24px;
          background: #6B1127 !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;
     }

     /* Post items layout on category pages */
     .cluster-grid,
     .grid-3 {
          display: flex !important;
          flex-direction: column !important;
          gap: 24px !important;
     }

     .post-item {
          width: 100% !important;
          text-align: center !important;
     }

     .post-item .card-body {
          align-items: center !important;
     }

     .post-item .card-meta {
          justify-content: center !important;
     }

     .filter-bar {
          justify-content: center !important;
          gap: 10px !important;
     }
}

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

     /* About page 2-col manifesto layout */
     .manifesto-grid,
     .grid-2 {
          display: flex !important;
          flex-direction: column !important;
          text-align: center !important;
          align-items: center !important;
          gap: 48px !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;
          width: 100%;
          max-width: 320px;
          margin: 0 auto;
     }

     .bio-grid-split {
          grid-template-columns: 1fr !important;
          gap: 40px !important;
     }

     .bio-two-col {
          display: flex !important;
          flex-direction: column !important;
          gap: 32px !important;
     }

     .bio-help-grid {
          gap: 12px !important;
     }

     .bio-help-item {
          padding: 16px !important;
          font-size: 14px !important;
     }

     .bio-prac-grid {
          grid-template-columns: 1fr !important;
          gap: 16px !important;
     }

     .bio-cta-row {
          flex-direction: column !important;
          gap: 20px !important;
          align-items: center !important;
          text-align: center !important;
     }
}

@media (max-width: 600px) {
     .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;
     }

     /* Center section headers on mobile */
     .mb48.tc-mobile, 
     .sec .wrap > .mb48,
     .sec .wrap > h2,
     .sec .wrap > .eyebrow,
     .wrap-sm > h1,
     .wrap-sm > .eyebrow,
     .wrap > div[style*="display:grid"] > div > h3 {
          text-align: center !important;
          display: block !important;
          margin-left: auto !important;
          margin-right: auto !important;
     }

     /* Universal grid to 1-col on mobile */
     #posts-container,
     .grid-3 {
          display: flex !important;
          flex-direction: column !important;
          gap: 32px !important;
          text-align: center !important;
     }

     .post-item {
          width: 100% !important;
          text-align: center !important;
     }

     .post-item .card-body {
          align-items: center !important;
          text-align: center !important;
     }

     .post-item .card-meta {
          justify-content: center !important;
     }

     .sec .wrap .btn,
     .sec .wrap .btn-p,
     .sec .wrap .btn-o {
          margin-left: auto !important;
          margin-right: auto !important;
          display: flex !important;
          width: fit-content !important;
     }

     .divider {
          margin-left: auto !important;
          margin-right: auto !important;
     }

     .sec .wrap > p.body {
          margin-left: auto !important;
          margin-right: auto !important;
          text-align: center !important;
     }
     
     /* Bio Hero Custom Fix */
     .bio-hero {
          text-align: center !important;
     }
     
     .bio-hero .btn-g {
          margin: 0 auto !important;
     }

     /* Dla Specjalistów Benefits Fix */
     .benefits-layout {
          grid-template-columns: 1fr !important;
          gap: 40px !important;
          text-align: center !important;
          padding: 0 16px !important;
     }

     .benefit-row {
          text-align: center !important;
     }

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

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

     .manifesto-section {
          padding: 60px 0 !important;
     }
}

@media (max-width: 600px) {
     .sec, .manifesto-section {
          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 and center them */
     .hero-section .wrap>div>div>div[style*="flex"],
     .cat-hero-section .wrap>div>div>div[style*="flex"] {
          flex-direction: column !important;
          align-items: center !important;
          gap: 14px !important;
          padding-bottom: 50px;
     }
     
     /* Dla Specjalistów Hero */
     .spec-hero {
          padding: 80px 0 60px !important;
     }
     
     .spec-hero h1 {
          font-size: 34px !important;
     }

     /* Center O NAS section on Dla Specjalistów page */
     section#o-nas .wrap > div[style*="display:grid"] {
          display: flex !important;
          flex-direction: column !important;
          text-align: center !important;
          align-items: center !important;
          gap: 32px !important;
     }

     section#o-nas .wrap > div[style*="display:grid"] .divider {
          margin-left: auto !important;
          margin-right: auto !important;
     }

     section#o-nas .wrap > div[style*="display:grid"] div[style*="display:flex"] {
          justify-content: center !important;
          flex-direction: column !important;
          gap: 16px !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, .nl-sm form {
          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;
     }

     /* Big Newsletter Section Fix */
     .nl-section {
          padding: 40px 0 !important;
     }

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

     .nl-description {
          max-width: 100% !important;
          margin-bottom: 24px !important;
          line-height: 1.6 !important;
     }

     .nl-perks {
          align-items: center !important;
          margin-bottom: 24px !important;
     }

     .nl-perks {
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;
          margin-bottom: 24px !important;
          gap: 14px !important;
          padding-left: 8px !important;
     }

     .nl-perk {
          display: flex !important;
          align-items: flex-start !important;
          text-align: left !important;
          gap: 12px !important;
          width: 100% !important;
          line-height: 1.5 !important;
          color: rgba(255,255,255,.85) !important;
     }

     .nl-dot {
          margin-top: 8px !important;
          flex-shrink: 0 !important;
     }

     .nl-form-big {
          display: flex !important;
          flex-direction: column !important;
          gap: 16px !important;
     }

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

     .nl-social-proof {
          margin-top: 40px !important;
          padding-top: 32px !important;
          text-align: center !important;
     }

     .nl-sp-q {
          font-size: 15px !important;
          line-height: 1.5 !important;
     }

     .blog-grid .card-body div[style*="justify-content:space-between"] {
          flex-wrap: wrap !important;
          gap: 12px !important;
     }

     .blog-grid .btn-g {
          width: auto !important;
          font-size: 11px !important;
          padding-bottom: 2px !important;
          border-bottom: 2px solid currentColor !important;
          text-decoration: none !important;
     }

     .blog-feat .card-body div[style*="justify-content:space-between"] {
          flex-direction: column !important;
          align-items: flex-start !important;
          gap: 20px !important;
     }

     .blog-feat .card-meta {
          font-size: 11px !important;
          color: var(--ink3) !important;
          display: flex !important;
          flex-wrap: wrap !important;
          gap: 6px 12px !important;
          line-height: 1.4 !important;
     }

     .blog-feat .card-meta span {
          display: inline-block !important;
     }

     .blog-feat .btn-g {
          width: auto !important;
          justify-content: flex-start !important;
          padding: 0 !important;
          padding-bottom: 2px !important;
          background: transparent !important;
          color: var(--r5) !important;
          border-radius: 0 !important;
          border: none !important;
          border-bottom: 2px solid currentColor !important;
          text-align: left !important;
          font-size: 12px !important;
          font-weight: 700 !important;
          letter-spacing: .08em !important;
          text-transform: uppercase !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;
     }
}

/* ════════════════════════════════════════════
   LANDING E-BOOK (page-landing-ebook.html)
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
     .lp-hero-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 32px;
          padding: 40px 0;
          text-align: center;
     }

     .lp-hero-text, .lp-hero-action {
          display: contents; /* Pozwala gridowi zarządzać bezpośrednio dziećmi tych divów */
     }

     .lp-hero-eyebrow { order: 1; }
     .lp-hero-h1 { order: 2; margin-bottom: 24px; }
     .lp-hero-lead { order: 3; margin-bottom: 32px; max-width: 100% !important; }
     
     /* FORM BOX - Priorytet (Najważniejszy element) */
     .lp-hero-action .lp-form-box { 
          order: 4; 
          margin-bottom: 24px;
          max-width: 100% !important;
     }

.lp-hero-action .lp-book-mockup { 
     order: 5; 
     height: auto;
     aspect-ratio: auto; /* Usunięcie sztywnego ratio dla mobilki */
     margin-bottom: 24px;
     max-width: 100% !important;
     background: transparent; /* Brak tła ułatwia dopasowanie wizualne */
     box-shadow: none; /* Opcjonalnie usuwamy cień z kontenera jeśli img ma swój */
}

.lp-hero-action .lp-book-mockup img {
     height: auto;
     width: 100%;
     object-fit: contain; /* Gwarantuje brak przycinania */
}


     /* BULLETS - Na samym dole mobilnie */
     .lp-hero-bullets { 
          order: 6; 
          text-align: left;
          padding-left: 16px; 
     }

     .lp-bullets li {
          font-size: 16px;
     }

     /* FEATURE GRID - Jedna kolumna na mobile */
     .lp-feature-grid {
          grid-template-columns: 1fr;
          gap: 32px;
          text-align: center;
     }

     .lp-feature-box {
          padding: 32px 24px;
     }

     .lp-feature-grid .lp-bullets li {
          text-align: left;
     }
}

@media (max-width: 600px) {
     .lp-book-mockup {
          height: 300px;
     }
     
     .lp-book-mockup img {
          max-width: 180px;
     }
}