/* ==========================================================================
   Lakeshore Loans USA — Page-level sections — services, expert reviews, FAQ inline, citations, apply form
   Part of the modular "Shoreline" design system. Load order: base → layout → components → sections.
   ========================================================================== */

/* ---------- Services (alternating media/text rows) ---------- */
.service-row{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:40px 0; border-top:1px solid var(--line-soft);
}
.service-row:first-of-type{ border-top:none; padding-top:8px; }
.service-row.reverse .service-media{ order:2; }
.service-row.reverse .service-text{ order:1; }
@media (max-width:780px){
  .service-row, .service-row.reverse{ grid-template-columns:1fr; }
  .service-row.reverse .service-media{ order:0; }
  .service-row.reverse .service-text{ order:0; }
}
.service-media{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-1);
  aspect-ratio:4/3;
}
.service-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.service-text .service-index{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-tide-dark); display:block; margin-bottom:8px;
}
.service-text h3{ font-size:1.5rem; margin-bottom:10px; }
.service-text ul{ padding-left:18px; margin:14px 0 0; }
.service-text li{ color:var(--ink-soft); margin-bottom:6px; }


/* ---------- Inline FAQ on homepage ---------- */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
@media (max-width:780px){ .faq-grid{ grid-template-columns:1fr; } }


/* ---------- Citations strip ---------- */
.citations-strip{
  background:var(--shore-sand); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:24px 0; margin-top:0;
}
.citations-strip .cit-label{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--driftwood); margin-bottom:12px; display:block;
}
.citations-list{
  display:flex; flex-wrap:wrap; gap:16px 28px; list-style:none; margin:0; padding:0;
}
.citations-list li{
  font-size:.82rem; color:var(--ink-soft);
}
.citations-list a{ color:var(--lake-navy); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.citations-list .cit-badge{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--driftwood); margin-right:8px; padding:2px 6px;
  border:1px solid var(--line); border-radius:2px;
}


/* ---------- Apply / Conversion section (APIdiamond form) ---------- */
.apply-disclosure{
  background:rgba(255,255,255,0.6); border:1px solid var(--line);
  border-left:3px solid var(--amber-tide-dark); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:36px; font-size:.85rem; color:var(--ink-soft); line-height:1.5;
}
.apply-disclosure strong{ color:var(--ink); }
.apply-disclosure a{ color:var(--lake-navy); text-decoration:underline; text-underline-offset:2px; font-weight:600; }

.apply-section{
  background:
    radial-gradient(ellipse at 85% 110%, rgba(217,168,108,0.10), transparent 50%),
    var(--shore-sand);
  padding:64px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.apply-grid{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center;
}
@media (max-width:920px){ .apply-grid{ grid-template-columns:1fr; gap:32px; } }
.apply-pitch h2{ max-width:18ch; margin-bottom:14px; }
.apply-pitch .lede{ max-width:52ch; }
.apply-benefits{
  list-style:none; margin:24px 0 0; padding:0;
}
.apply-benefits li{
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 0; font-size:.95rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
}
.apply-benefits li:last-child{ border-bottom:none; }
.apply-benefits li::before{
  content:"✓"; color:var(--good-green); font-weight:700; flex-shrink:0;
  width:22px; height:22px; background:var(--good-green-bg); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.78rem; margin-top:1px;
}
.apply-benefits strong{ color:var(--ink); }

.apply-form-card{
  background:var(--white); border:1px solid var(--line); border-radius:4px;
  padding:32px; box-shadow:0 1px 2px rgba(43,57,70,0.05), 0 18px 36px rgba(43,57,70,0.10);
  position:relative;
}
.apply-form-card::before{
  content:""; position:absolute; top:-8px; left:32px; right:32px; height:4px;
  background:linear-gradient(90deg, var(--amber-tide) 0%, var(--lake-navy) 100%);
  border-radius:2px 2px 0 0;
}
.form-card-header{
  margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.form-card-eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber-tide-dark); display:block; margin-bottom:6px;
}
.form-card-header h3{ margin:0; font-size:1.4rem; }

/* APIdiamond form container — script injects inputs here */
#_lg_form_{ min-height:280px; }
#_lg_form_ input,
#_lg_form_ select,
#_lg_form_ textarea{
  font-family:var(--body) !important; font-size:.95rem !important;
}
#_lg_form_ label{
  font-family:var(--body) !important; color:var(--ink) !important;
}
#_lg_form_ button,
#_lg_form_ [type="submit"]{
  font-family:var(--body) !important; font-weight:700 !important;
}

.form-disclosure{
  margin-top:18px; font-size:.76rem; color:var(--driftwood); line-height:1.55;
}
.form-disclosure a{ color:var(--lake-navy); text-decoration:underline; }

.trust-row{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:18px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--driftwood);
}
.trust-row .trust-item{ display:flex; align-items:center; gap:6px; }
.trust-row .trust-item::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--good-green);
}


/* ---------- Comparison table — Lakeshore vs competitors ---------- */
.compare-wrap{ overflow-x:auto; }
.compare-table{ min-width:760px; }
.compare-table th{ font-size:.78rem; vertical-align:bottom; }
.compare-table .featured-col{ position:relative; }
.compare-table tbody .featured-col{
  background:var(--shore-sand-2); border-left:2px solid var(--amber-tide);
  border-right:2px solid var(--amber-tide);
}
.compare-table thead .featured-col{
  border-top:2px solid var(--amber-tide);
  border-left:2px solid var(--amber-tide);
  border-right:2px solid var(--amber-tide);
  background:var(--amber-tide-dark);
  color:var(--white);
}
.compare-table tbody tr:last-child .featured-col{ border-bottom:2px solid var(--amber-tide); }
.compare-table td{ font-size:.86rem; }
.compare-table td.positive{ color:var(--good-green); font-weight:600; }
.compare-table td strong{ font-family:var(--body); font-weight:700; color:var(--ink); }
.compare-takeaways{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:32px;
}
@media (max-width:780px){ .compare-takeaways{ grid-template-columns:1fr; } }
.takeaway{
  background:var(--white); border:1px solid var(--line); border-left:3px solid var(--amber-tide-dark);
  border-radius:var(--radius); padding:16px 18px; font-size:.88rem; line-height:1.55;
  color:var(--ink-soft);
}
.takeaway strong{ color:var(--lake-navy); display:block; margin-bottom:4px; font-size:.95rem; }

/* ---------- State availability snapshot ---------- */
.state-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:8px;
}
@media (max-width:780px){ .state-grid{ grid-template-columns:1fr; } }
.state-col{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-1);
}
.state-col-head{ margin-bottom:16px; }
.state-col-head p{ margin:10px 0 0; font-size:.92rem; color:var(--ink-soft); }
.state-badge{
  display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:5px 11px; border-radius:2px; font-weight:600;
}
.state-badge.positive{ background:var(--good-green-bg); color:var(--good-green); }
.state-badge.warning{ background:var(--alert-rust-bg); color:var(--alert-rust); }
.state-list{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
}
.state-list span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; padding:5px 9px;
  background:var(--shore-sand-2); border:1px solid var(--line);
  border-radius:2px; font-family:var(--mono); font-size:.78rem; font-weight:600;
  color:var(--ink); letter-spacing:.04em;
}
.state-restricted .state-list span{
  background:var(--alert-rust-bg); border-color:rgba(177,72,52,0.18); color:var(--alert-rust);
}
.state-available .state-list span{
  background:var(--good-green-bg); border-color:rgba(60,110,71,0.16); color:var(--good-green);
}

/* ---------- How to apply step-by-step ---------- */
.apply-steps{
  list-style:none; padding:0; margin:0; position:relative;
}
.apply-steps::before{
  content:""; position:absolute; left:21px; top:24px; bottom:24px; width:2px;
  background:var(--line); z-index:0;
}
.apply-step{
  display:flex; gap:20px; align-items:flex-start; padding:18px 0; position:relative; z-index:1;
}
.step-number{
  flex-shrink:0; width:44px; height:44px; border-radius:50%;
  background:var(--lake-navy); color:var(--white);
  font-family:var(--display); font-weight:700; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--white); box-shadow:0 0 0 1px var(--line);
}
.step-content{ flex:1; padding-top:4px; }
.step-content h3{ margin:0 0 4px; font-size:1.15rem; }
.step-content p{ margin:0 0 8px; color:var(--ink-soft); font-size:.95rem; }
.step-time{
  display:inline-block; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber-tide-dark); background:var(--shore-sand);
  padding:3px 9px; border-radius:2px; font-weight:600;
}
.apply-note{
  margin-top:30px; padding:18px 22px;
  background:var(--shore-sand-2); border:1px solid var(--line);
  border-left:3px solid var(--lake-teal); border-radius:var(--radius);
  font-size:.9rem; line-height:1.55; color:var(--ink-soft);
}
.apply-note strong{ color:var(--ink); }


/* ---------- Responsive UI refinements (audit pass June 2026) ---------- */

/* Compare table — horizontal scroll affordance for small screens
   Adds a gradient fade on the right edge + scroll hint label */
@media (max-width:780px){
  .compare-wrap{
    position:relative;
    -webkit-overflow-scrolling:touch;
  }
  .compare-wrap::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:38px;
    background:linear-gradient(90deg, transparent 0%, var(--shore-sand) 100%);
    pointer-events:none;
  }
  .compare-wrap::before{
    content:"← scroll to compare more →";
    display:block;
    font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
    color:var(--driftwood); text-align:center;
    padding:8px 0; background:var(--shore-sand-2);
    border:1px dashed var(--line); border-radius:var(--radius);
    margin-bottom:10px;
  }
}

/* Hero meta info — cleaner badge styling, especially on mobile */
.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;
}
.hero-meta > div, .hero-meta > span{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 13px; font-size:.82rem; color:var(--ink-soft); line-height:1.4;
}
.hero-meta strong{ color:var(--ink); display:block; font-size:.72rem; font-family:var(--mono);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }

/* Hero image — shorter aspect ratio on smaller screens to save vertical space */
@media (max-width:780px){
  .hero-media img{ aspect-ratio:1/1; }
}
@media (max-width:480px){
  .hero-media img{ aspect-ratio:4/3; }
}

/* Header at tablet — keep things compact, ensure consistent gutter */
@media (max-width:920px){
  .header-inner{ gap:12px; padding:14px 0; }
}

/* Apply form card — ensure minimum visual presence even before JS form loads */
#_lg_form_:empty{ min-height:380px; }

/* Mobile nav menu polish — tap target padding */
@media (max-width:920px){
  nav.main-nav a{ min-height:44px; display:flex; align-items:center; }
}

/* Tap-friendly button sizing for primary CTAs on small screens */
@media (max-width:480px){
  .btn-primary, .btn-outline-navy{ min-height:46px; padding:13px 22px; }
}