/* =====================================================
   Full Stack Lombok — responsive.css
   All media queries & breakpoint overrides
   ===================================================== */

/* ── Tablet & smaller desktop (≤ 1024px) ── */
@media (max-width: 1024px) {
  .foo-top { grid-template-columns: 1fr 1fr; }
  .proc    { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
  .split       { grid-template-columns: 1fr; gap: 24px; }
  .ctcg        { grid-template-columns: 1fr; }
  .tg          { columns: 2; }
  .detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail-aside{ position: static; }
  .prg         { grid-template-columns: 1fr; max-width: 420px; }
  .gal-grid    { grid-template-columns: repeat(2, 1fr); }
  .gal-wide    { grid-column: span 2; }
  .proc        { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  /* Nav */
  .nav           { padding: 0 16px; height: 56px; }
  .nav-links     { display: none !important; }
  .nav-cta       { display: none !important; }
  .ham           { display: flex !important; }

  /* Hero */
  .hero          { min-height: auto; padding: 56px 16px 42px; }
  .hero h1       { font-size: 32px; }
  .hero-sub      { font-size: 14px; }

  /* Stats Bar 2×2 */
  .sbar          { grid-template-columns: repeat(2, 1fr); }
  .sbar-item     { padding: 20px 10px; }
  .sbar-item:nth-child(1),
  .sbar-item:nth-child(2) { border-bottom: 1px solid var(--bdr); }
  .sbar-item:nth-child(2) { border-right: none; }
  .sbar-item:nth-child(3) { border-right: 1px solid var(--bdr); }
  .sbar-item:nth-child(4) { border-right: none; }
  .sbar-num      { font-size: 22px; }

  /* Sections */
  .S             { padding: 40px 16px; }
  .phero         { padding: 40px 16px 32px; }

  /* Testimonials */
  .tg            { columns: 1; }

  /* Layout */
  .ctab-inner    { flex-direction: column; text-align: center; }
  .ctab-inner .btn-wa { width: 100%; justify-content: center; }
  .split         { gap: 20px; }
  .detail-grid   { grid-template-columns: 1fr; }
  .detail-aside  { position: static; }

  /* Footer */
  .foo-top       { grid-template-columns: 1fr 1fr; }
  .foo-top > div:first-child { grid-column: span 2; }

  /* Pricing */
  .prg           { grid-template-columns: 1fr; max-width: 100%; }

  /* Gallery */
  .gal-grid      { grid-template-columns: repeat(2, 1fr); }

  /* Process */
  .proc          { grid-template-columns: repeat(2, 1fr); }

  /* Article detail sidebar */
  .art-featured  { height: 180px; }
}

/* ── Small mobile (≤ 540px) ── */
@media (max-width: 540px) {
  .hero h1       { font-size: 28px; }
  .phero h1      { font-size: 24px; }
  .foo-top       { grid-template-columns: 1fr; }
  .partg         { grid-template-columns: 1fr; }
  .gal-grid      { grid-template-columns: 1fr; }
  .gal-wide      { grid-column: span 1; }
  .proc          { grid-template-columns: 1fr; }
  .lb-card       { padding: 32px 22px; }
  .lb-emoji      { font-size: 54px; }
  .btn-row       { flex-direction: column; }
  .btn-row .btn  { width: 100%; justify-content: center; }
}

/* ── Testimonials responsive ── */
@media (min-width: 769px)  { .tg { columns: 2; } }
@media (min-width: 1100px) { .tg { columns: 3; } }

/* ── Force sidebar below on mobile/tablet ── */
@media (max-width: 900px) {
  [style*="grid-template-columns: 1fr 270px"],
  [style*="grid-template-columns:1fr 270px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 290px"] {
    grid-template-columns: 1fr !important;
  }
}