/* ======================================================================
   NUPRC OGISP – clean responsive layout for index.html
   Works alongside your existing style.css. No preprocessors required.
   ====================================================================== */

/* --------- CSS variables (safe, ASCII hyphens) --------- */
:root{
  --green: #189b54;
  --green-2: #148548;
  --green-3: #0f6e3c;
  --ink:   #222;
  --muted: #63707b;
  --white: #fff;
  --line:  #e9eef3;
  --accent:#ffca28;
}

/* --------- Base / reset (very light) --------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--ink);
  font:16px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
       Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background:#f7f9fb;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:#146bc3; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* --------- Top bar you already have (.nav) --------- */
.nav{
  position:sticky; top:0; z-index:1000;
  background:#101417; color:#fff;
  border-bottom:1px solid #0f0f0f;
}
.nav .logo{ height:44px; width:auto; }
.nav ul{
  list-style:none; margin:0; padding:10px 16px;
  display:flex; gap:18px; align-items:center; justify-content:flex-end;
}
.nav a{ color:#fff; font-weight:600; }
.nav a.complain{
  border:1px solid #e96b63; border-radius:8px; padding:6px 10px;
}

/* --------- Main wrapper: two columns on desktop --------- */
.container{
  /* Desktop / large screens */
  width:min(1180px, 100%);
  margin:24px auto 48px;
  padding:0 16px;
  display:grid;
  grid-template-columns: 350px 1fr;   /* left panel + right panel */
  gap:28px;
}

/* Left column panel */
.panel-left h1{
  font-size:44px; margin:0 0 6px; letter-spacing:.3px; font-weight:800;
}
.panel-left .subtitle{
  margin:0 0 18px; color:var(--muted);
}
.btn{
  display:inline-block; border:0; cursor:pointer; font-weight:700;
  padding:14px 18px; border-radius:6px; text-align:center;
}
.btn-green{
  color:#fff;
  background:linear-gradient(0deg, var(--green-2), var(--green));
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.payment h4{ margin:18px 0 8px; }
.payment img{ width:340px; max-width:100%; border:1px solid var(--line); }

/* --------- “Getting Started” block (right column) --------- */
.step-section{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  padding:26px 28px;
  color:#fff;
  /* diagonal green pattern */
  background:
    repeating-linear-gradient(45deg,
      var(--green) 0 22px,
      var(--green-2) 22px 44px);
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.step-section h2{
  margin:0 0 16px;
  font-size:32px; letter-spacing:.2px;
}

/* Step rows */
.step{
  display:grid;
  grid-template-columns: 56px 120px 1fr; /* number, image, copy */
  gap:16px;
  align-items:center;
  padding:14px 10px;
}
.step + .step{ border-top:1px solid rgba(255,255,255,.12); }

.step-num{
  width:56px; height:56px; border-radius:50%;
  background:var(--accent); color:#000; display:grid; place-items:center;
  font-weight:900; font-size:22px;
}
.step-img{
  width:120px; height:120px; border-radius:50%;
  object-fit:cover; box-shadow:0 5px 18px rgba(0,0,0,.15);
}
.step-content h3{
  margin:0 0 6px; font-size:22px; font-weight:800; color:#fff;
}
.step-content p, .step-content a{ color:#f3f8f1; }
.step-content a{ font-weight:700; }

/* --------- Footer --------- */
footer{
  text-align:center; color:#7b8996; padding:24px 12px 40px;
}
footer a{ color:#7b8996; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* Tablet down: relax grid spacing */
@media (max-width: 1100px){
  .container{ grid-template-columns: 320px 1fr; gap:22px; }
}

/* Tablet portrait and below: stack columns */
@media (max-width: 991.98px){
  .container{
    grid-template-columns: 1fr;   /* stack */
  }
  /* Put the Getting Started block after the left column with spacing */
  .step-section{ margin-top:24px; }

  /* So buttons breathe on narrow screens */
  .btn{ width:100%; }
}

/* Small phones */
@media (max-width: 420px){
  .panel-left h1{ font-size:38px; }
  .step-section{ padding:20px; }
  .step{
    grid-template-columns: 48px 100px 1fr;
    gap:12px;
  }
  .step-num{ width:48px; height:48px; font-size:20px; }
  .step-img{ width:100px; height:100px; }
}


/* ======= FINAL OVERRIDES – keep at the very end ======= */

/* Desktop/tablet: FORCE two-column grid and kill legacy floats/widths */
@media (min-width: 992px){
  body .container{
    display: grid !important;
    grid-template-columns: 360px 1fr !important; /* left + right */
    gap: 28px !important;
    align-items: start !important;
    width: min(1180px, 100%) !important;
    margin: 24px auto 48px !important;
    padding: 0 16px !important;
  }

  /* Anything placed inside .container should NOT float or have fixed narrow widths */
  body .container > *{
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    clear: none !important;
  }

  /* Common legacy “right column” classes used by old theme */
  .right, .home-right, [class*="right-col"]{
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  /* Ensure the green panel actually spans the right grid track */
  .step-section{
    width: 100% !important;
    min-width: 0 !important;  /* allow grid to shrink content correctly */
  }
}

/* Phones/tablets: stack the columns, panel under the left side */
@media (max-width: 991.98px){
  body .container{ display: block !important; }
  .step-section{ margin-top: 24px !important; }
  .btn{ width: 100% !important; }
}