/* =======================================================================
   LOCAL LANDING PAGES — midland.html · amarillo.html · decatur.html
   Loads AFTER styles.css + cinematic.css + catalog.css.
   Only adds components those three files don't already provide.
   ======================================================================= */

/* =======================  HERO NAP BLOCK  =======================
   Sits inside .page-hero (dark). Name / Address / Phone, the three
   things local search and AI answer engines extract first.          */
.yard-nap{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-top:30px;position:relative;z-index:4;
}
.nap{
  display:flex;gap:13px;align-items:flex-start;padding:18px 19px;
  border-radius:var(--radius);background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
}
.nap > svg{width:19px;height:19px;flex-shrink:0;color:var(--sage-400);margin-top:3px}
.nap-l{
  display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.52);font-weight:600;font-family:var(--font-display);
}
.nap b,.nap address{
  display:block;font-style:normal;font-family:var(--font-display);font-weight:700;
  font-size:16px;color:#fff;margin-top:6px;line-height:1.45;
}
.nap a{color:#fff;text-decoration:none}
.nap a:hover{color:var(--sage-400)}
.nap small{
  display:block;color:rgba(255,255,255,.6);font-size:13px;margin-top:5px;
  font-weight:400;font-family:var(--font-body);line-height:1.5;
}

/* big click-to-call row under the hero copy */
.call-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px;position:relative;z-index:4}
.btn-call{display:inline-flex;align-items:center;gap:10px}
.btn-call svg{width:19px;height:19px}

/* =======================  DIRECT-ANSWER CALLOUT  =======================
   Short, self-contained, declarative — the shape AI engines quote.  */
.answer{
  margin-top:26px;padding:24px 26px;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--sage-700);
  border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow-sm);
}
.answer p{font-size:17px;line-height:1.62;color:var(--text);max-width:74ch}
.answer p + p{margin-top:13px}
.answer strong{font-weight:700;color:var(--ink)}

/* =======================  SPEC / COMPARISON TABLE  =======================
   Wrapper scrolls on its own so the page never scrolls sideways.    */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:34px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--shadow-sm);
}
.spec-table{width:100%;border-collapse:collapse;min-width:680px;font-size:15px}
.spec-table caption{
  caption-side:bottom;text-align:left;padding:14px 20px 18px;
  font-size:13.5px;color:var(--muted);line-height:1.55;
}
.spec-table th,.spec-table td{
  padding:15px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
}
.spec-table thead th{
  background:var(--sand-2);font-family:var(--font-display);font-weight:700;
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.spec-table tbody th{
  font-family:var(--font-display);font-weight:700;font-size:15.5px;
  color:var(--ink);white-space:nowrap;
}
.spec-table tbody tr:hover{background:var(--sand)}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0}
.spec-table td small{display:block;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.5}

/* =======================  SERVICE-AREA TOWN GRID  ======================= */
.town-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px;margin-top:32px;
}
.town{
  display:flex;align-items:flex-start;gap:11px;padding:15px 17px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);transition:border-color .3s,transform .3s var(--ease);
}
.town:hover{border-color:var(--sage-200);transform:translateY(-2px)}
.town svg{width:16px;height:16px;color:var(--sage-700);flex-shrink:0;margin-top:2px}
.town b{display:block;font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
.town span{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}

/* =======================  "WHAT WE STOCK" CARDS  ======================= */
.stock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.stock{
  display:flex;flex-direction:column;padding:25px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.stock:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sage-200)}
.stock .s-ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(87,118,86,.1);color:var(--sage-700);margin-bottom:15px;
}
.stock .s-ico svg{width:21px;height:21px}
.stock h3{font-size:17.5px;color:var(--ink)}
.stock p{font-size:14.5px;color:var(--muted);margin-top:8px;line-height:1.58;flex:1}
.stock .s-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--sage-700);
}
.stock .s-go svg{width:15px;height:15px}

/* =======================  DIRECTIONS / YARD DETAIL  ======================= */
.dir{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start;margin-top:34px}
.dir-card{
  padding:28px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.dir-card address{
  font-style:normal;font-family:var(--font-display);font-weight:700;
  font-size:20px;line-height:1.5;color:var(--ink);
}
.dir-card > p{margin-top:16px;color:var(--muted);font-size:15px;line-height:1.65}
.dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin-top:22px}
.dl dt{
  color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;font-family:var(--font-display);padding-top:3px;white-space:nowrap;
}
.dl dd{margin:0;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink)}
.dl dd a{color:var(--sage-700);text-decoration:none}
.dl dd a:hover{text-decoration:underline}

/* =======================  RATING / TRUST BAND  ======================= */
.rating-band{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:34px;
}
.rb{background:var(--paper);padding:28px 20px;text-align:center}
.rb .stars{display:flex;justify-content:center;gap:2px;color:var(--star);margin-bottom:9px}
.rb .stars svg{width:15px;height:15px}
.rb b{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(23px,3vw,33px);color:var(--ink);letter-spacing:-.02em;line-height:1.1;
}
.rb span{display:block;margin-top:7px;font-size:13.5px;color:var(--muted);line-height:1.5}

/* =======================  OTHER-YARD CROSS LINKS (dark)  ======================= */
.yard-cross{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.xcard{
  display:flex;flex-direction:column;padding:25px;border-radius:var(--radius);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  color:#fff;text-decoration:none;transition:background .3s,border-color .3s,transform .35s var(--ease);
}
.xcard:hover{background:rgba(255,255,255,.09);border-color:rgba(141,166,140,.42);transform:translateY(-3px)}
.xcard h3{color:#fff;font-size:18.5px}
.xcard address{font-style:normal;color:rgba(255,255,255,.66);font-size:14.5px;margin-top:10px;line-height:1.6}
.xcard p{color:rgba(255,255,255,.66);font-size:14px;margin-top:10px;line-height:1.6;flex:1}
.xcard .x-go{
  margin-top:18px;display:inline-flex;gap:7px;align-items:center;
  font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--sage-400);
}
.xcard .x-go svg{width:15px;height:15px}
.xcard.is-current{background:rgba(87,118,86,.18);border-color:rgba(141,166,140,.42)}
.xcard.is-current .x-go{color:rgba(255,255,255,.6)}

/* =======================  RESPONSIVE  ======================= */
@media (max-width:1000px){
  .yard-nap{grid-template-columns:1fr}
  .stock-grid{grid-template-columns:1fr 1fr}
  .yard-cross{grid-template-columns:1fr}
  .dir{grid-template-columns:1fr}
  .rating-band{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .stock-grid{grid-template-columns:1fr}
  .town-grid{grid-template-columns:1fr}
  .call-row .btn{width:100%;justify-content:center}
  .answer{padding:20px;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
  .answer p{font-size:16px}
  .dir-card{padding:22px}
  .dl{grid-template-columns:1fr;gap:4px 0}
  .dl dd{margin-bottom:10px}
  .spec-table caption{padding:12px 16px 16px}
}