/* =====================================================
   Edzorb Law · Free resources (PDF downloads)
   2 x 2 cards on phone. Mobile first (up to 425px).
   ===================================================== */

.resources {
  padding: 40px 0 44px;
  background: #fff;
  scroll-margin-top: 62px;
}

/* 2 cards per row, 2 rows */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.resource-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

/* picture on top: cropped from the top, like the sample page */
.resource-art {
  aspect-ratio: 1 / 1.05;
  overflow: hidden;
  background: var(--sky);
}

.resource-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.resource-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 14px;
}

/* small format chip */
.resource-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sky-light);
  color: var(--navy);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.resource-title {
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
}

/* "Download PDF" sits at the bottom of every card */
.resource-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: auto;
  color: var(--violet);
  font-size: 14px;
  font-weight: 900;
}

.resource-download svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.resource-download:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the one CTA under the cards */
.resource-cta {
  width: 55%;
  margin-top: 22px;
}

/* very small phones */
@media (max-width: 360px) {
  .resource-grid {
    gap: 10px;
  }

  .resource-title {
    font-size: 15px;
  }
}

/* ---------- Tablet and desktop (601px and up): 4 in a row ---------- */
@media (min-width: 601px) {
  .resources {
    padding: 56px 0 60px;
  }

  .resource-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 28px;
  }

  .resource-cta {
    width: auto;
    margin-top: 28px;
  }
}


/* QBank, Notes and all resource tags */
.resource-tag {
  background: #D99500;
  color: #000;
  border: 1px solid #D99500;
}

/* Optional: keep the same colors on hover */
.resource-card:hover .resource-tag {
  background: #D99500;
  color: #000;
}


/* ===================================================== */


/* =========================================
   Free Resources Variation: rows
   Same look as "Choose Your Plan":
   icon tile on the left, name on the right, download button instead of the arrow.
   Class prefix: .resources--rows / .resource-row*
   ========================================= */

.resources.resources--rows {
  padding: 40px 0 44px;
  background: #e0f1fc;
}

.resource-row-list {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* one resource = one tappable card (tap = PDF opens / downloads) */
.resource-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform .2s, box-shadow .2s;
}

.resource-row:hover,
.resource-row:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  outline: none;
}

/* ---------- Icon tile ---------- */
.resource-row-icon {
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border-radius: 12px;
}

.resource-row-icon img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.resource-row-icon-peach { background: #ffe9d6; }
.resource-row-icon-lilac { background: #f0e5ff; }
.resource-row-icon-sky   { background: #E4F1FF; }
.resource-row-icon-mint  { background: #DDF6E9; }

/* ---------- Text ---------- */
.resource-row-info {
  flex: 1;
  min-width: 0;
}

.resource-row-name {
  font-size: 18px;
  line-height: 1.25;
  color: var(--navy);
}

.resource-row-meta {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

/* ---------- Round download button ---------- */
.resource-row-download {
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #14a0ec;
  color: var(--navy);
  transition: background .2s, color .2s, transform .2s;
}

.resource-row-download svg {
  width: 20px;
  height: 20px;
}

/* center the CTA button under the resource rows */
.resources--rows .resource-cta {
  display: flex;
  width: 60%;
  max-width: 280px;
  margin: 22px auto 0;
}

.resource-row:hover .resource-row-download,
.resource-row:focus-visible .resource-row-download {
  background: var(--navy);
  color: #fff;
  transform: translateY(2px);     /* arrow nudges down */
}

/* very small phones */
@media (max-width: 360px) {
  .resource-row {
    gap: 10px;
    padding: 12px;
  }

  .resource-row-icon {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }

  .resource-row-name {
    font-size: 16px;
  }
}

/* ---------- Tablet and desktop (601px and up): two columns ---------- */
@media (min-width: 601px) {
  .resources.resources--rows {
    padding: 56px 0 60px;
    background: #fff;
  }

  .resource-row-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource-row,
  .resource-row-download {
    transition: none;
  }

  .resource-row:hover {
    transform: none;
  }
}


/* ===================================================== */
.fs-section{
  --blue:#0a93e0; --red:#e1323f; --sky:#d4e7f5;
  --ink:#1f3b4f; --ink-soft:#4f6a7d;
  --card:#fff; --line:#d6e5f0; --surface:#f4f9fd;
  --gap:10px;
  --f-display:"Quicksand","Nunito",system-ui,sans-serif;
  --f-body:"Poppins","Segoe UI",system-ui,sans-serif;
  background:var(--surface);
  padding:32px 0;
  font-family:var(--f-body);
  color:var(--ink);
}
.fs-section *{box-sizing:border-box}
.fs-wrap{max-width:1160px;margin:0 auto;padding:0 16px}

/* heading */
.fs-head{margin-bottom:22px}
.fs-head h2{font-family:var(--f-display);font-size:1.4rem;font-weight:700;line-height:1.2;margin:4px 0 14px;color:var(--ink)}
.fs-tools{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fs-all{
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  margin:22px auto 0;
  padding:12px 28px;
  border-radius:999px;
  background:linear-gradient(180deg, #14a0ec, #0a7fcf);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 14px 28px -14px rgba(10,127,207,.95),
             inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}

/* arrows (phone par hidden, desktop par visible) */
.fs-arrows{display:none;gap:8px}
.fs-btn{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--blue);
  font-size:1.4rem;line-height:1;cursor:pointer;
}
.fs-btn:hover{border-color:var(--blue);background:var(--blue);color:#fff}

/* SLIDER: phone par 2 cards visible */
.fs-grid{
  display:flex;
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;            /* Firefox */
  padding-bottom:4px;
}
.fs-grid::-webkit-scrollbar{display:none}  /* Chrome/Safari */

/* card: exactly 2 visible = (100% - gap) / 2 */
.fs-card{
  flex:0 0 calc((100% - var(--gap)) / 2);
  scroll-snap-align:start;
  display:flex;flex-direction:column;overflow:hidden;min-width:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  color:var(--ink);
  text-decoration:none;
}
.fs-card:hover{border-color:var(--blue)}
.fs-thumb{
  aspect-ratio:4/3;
  background:var(--sky);
  overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
}
.fs-thumb img{width:100%;height:auto;object-fit:cover;object-position:top}
.fs-body{padding:10px;display:flex;flex-direction:column;gap:4px}
.fs-tag{font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--red)}
.fs-body b{font-size:.88rem;line-height:1.5}

/* tablet / desktop: 4 cards visible */
@media (min-width:900px){
  .fs-section{--gap:16px}
  .fs-card{flex:0 0 calc((100% - 3 * var(--gap)) / 4)}
  .fs-arrows{display:flex}
  .fs-body{padding:12px 14px 14px}
  .fs-body b{font-size:1rem}
}

.fs-head h2{
  text-align:center;
}

/* arrows bhi center me (sirf desktop par dikhte hain) */
.fs-tools{
  justify-content:center;
}

.fs-all:hover{
  transform:translateY(-1px);
  color:#fff;
}