/* ==========================================================================
   BLUELARK — HUB PAGE EXTENSION
   For the two index pages: /services/ and /platforms/.

   Loaded AFTER bluelark-service.css, which these pages reuse almost entirely —
   same hero, stats band, cards, matrix, statement panel, CTA band. Everything
   below is the handful of things a hub page needs and a detail page does not:
   linkable rows and panels, a platform comparison with logos in the header,
   and a three-up quick-links row.

   Scoped to .bl-service, same as the stylesheet it extends.
   ========================================================================== */

/* ---------- hero panel rows that are links ---------- */
.bl-service a.pitem{color:inherit;text-decoration:none}
.bl-service a.pitem .go{
  margin-left:auto;flex:0 0 auto;display:flex;align-items:center;
  opacity:.65;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);
}
.bl-service a.pitem .go svg{width:16px;height:16px;stroke:var(--white);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-service a.pitem:hover .go{opacity:1;transform:translateX(3px)}

/* ---------- numbered rows that are links (the service lifecycle) ---------- */
/* the <li> in the base stylesheet is itself a grid; when the row is a link the
   anchor carries the grid instead, so the list item must get out of the way. */
.bl-service .symptom-list li.row-link{display:block;padding:0}
.bl-service .symptom-list a.row{
  display:grid;grid-template-columns:56px minmax(0,0.9fr) minmax(0,1.4fr) 24px;
  gap:var(--space-5);align-items:start;
  padding:var(--space-5) 0;color:inherit;text-decoration:none;
}
.bl-service .symptom-list a.row .go{
  display:flex;align-items:center;justify-content:flex-end;padding-top:var(--space-3);
  opacity:0;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);
}
.bl-service .symptom-list a.row .go svg{width:18px;height:18px;stroke:var(--blue-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-service .symptom-list li.row-link:hover a.row .go{opacity:1;transform:translateX(3px)}
.bl-service .symptom-list li.row-link:hover h3{color:var(--blue-600)}
.bl-service .symptom-list h3{transition:color var(--duration-base) var(--ease-out)}
@media(max-width:860px){
  .bl-service .symptom-list a.row{grid-template-columns:48px minmax(0,1fr);gap:var(--space-4)}
  .bl-service .symptom-list a.row p{grid-column:2;padding-top:var(--space-2)}
  .bl-service .symptom-list a.row .go{display:none}
}

/* ---------- service card: who it is for ---------- */
.bl-service .svc .who{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);color:var(--text-muted);
  padding-top:var(--space-3);margin-top:auto;
  border-top:var(--border-width) solid var(--border-subtle);
}
.bl-service .svc .who b{color:var(--text-heading);font-weight:var(--weight-medium)}
.bl-service .svc .arrow-link{margin-top:var(--space-3);padding-top:0}

/* whole card is clickable */
.bl-service a.svc,.bl-service a.plat,.bl-service a.card{color:inherit;text-decoration:none}
.bl-service a.svc:hover h3,.bl-service a.plat:hover h3,.bl-service a.card:hover h3{color:var(--blue-600)}

/* ---------- platform comparison: logos in the table header ---------- */
.bl-service table.compare thead th{vertical-align:middle;padding-top:var(--space-5);padding-bottom:var(--space-5)}
.bl-service table.compare thead th img{height:26px;width:auto;max-width:120px;object-fit:contain;margin-bottom:var(--space-3)}
.bl-service table.compare thead th .badge{text-transform:uppercase;font-size:10.5px;padding:4px 10px}
.bl-service table.compare thead th .hd{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.bl-service table.compare tbody th{width:22%}
.bl-service table.compare td{width:26%}

/* ---------- three-up quick links ---------- */
.bl-service .next-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.bl-service .next-grid--3{grid-template-columns:1fr}}
.bl-service .next-grid--flush{padding:0}

/* ---------- compact platform card for the services hub ---------- */
.bl-service .plat--compact{min-height:0}
.bl-service .plat--compact p{margin-bottom:0}

/* ==========================================================================
   HUB HERO — the parent treatment
   ==========================================================================
   A hub page sits one level above the pages it links to, and the hero says so
   in three ways the child pages deliberately do not use:

   1. A deeper, navy-weighted gradient. Child pages run navy → blue → sky; this
      stops at blue, so the parent reads as the darker, quieter authority and
      the children keep the brighter moment.
   2. More scale and air — a wider measure and a larger display size than any
      child hero.
   3. An index card that overlaps the bottom edge of the hero and lists the
      child pages. The parent visibly contains its children, which is the whole
      point: you can see the set before you choose from it.
   ========================================================================== */
.bl-service .hub-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--blue-900) 0%,#16269B 48%,var(--blue-600) 100%);
  color:var(--white);
  padding:var(--space-10) 0 calc(var(--space-10) + var(--space-8));
}
.bl-service .hub-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.10),transparent 42%),
             linear-gradient(90deg,rgba(0,0,40,.22),transparent 72%);
}
.bl-service .hub-hero .wrap{position:relative;z-index:1}
.bl-service .hub-hero__in{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);max-width:17ch}
.bl-service .hub-hero h1{
  font-size:clamp(42px,5.4vw,66px);line-height:1.04;color:var(--white);max-width:16ch;
}
.bl-service .hub-hero h1 em{font-style:normal;color:#A9E9FF}
.bl-service .hub-hero .lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:rgba(255,255,255,.82);max-width:60ch}
.bl-service .hub-hero__in{max-width:none}
.bl-service .hub-hero .hero-cta{margin-top:var(--space-2)}
.bl-service .hub-hero .hub-note{
  font-size:var(--text-body-sm);line-height:var(--leading-body);color:rgba(255,255,255,.66);
  padding-top:var(--space-4);border-top:var(--border-width) solid rgba(255,255,255,.22);max-width:62ch;width:100%;
}
/* The mark sits inside .wrap, so it aligns to the same 1200px container edge
   as the type rather than floating against the viewport and being cropped. */
.bl-service .hub-hero__mark{
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
  width:min(400px,34vw);height:auto;opacity:.09;color:var(--white);
  pointer-events:none;z-index:0;
}
@media(max-width:1100px){.bl-service .hub-hero__mark{opacity:.07;width:min(320px,30vw)}}

/* ---------- the index card that straddles the hero's bottom edge ---------- */
.bl-service .hub-index{
  position:relative;z-index:3;
  margin-top:calc(var(--space-8) * -1);margin-bottom:var(--space-7);
  background:var(--white);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:0 18px 44px -26px rgba(0,0,80,.32);
  padding:var(--space-6) var(--space-7) var(--space-7);
}
.bl-service .hub-index__label{
  display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
  padding-bottom:var(--space-5);margin-bottom:var(--space-2);
  border-bottom:var(--border-width) solid var(--border-subtle);
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-600);
}
.bl-service .hub-index__label span{
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-light);
  letter-spacing:0;text-transform:none;color:var(--text-muted);
}
.bl-service .hub-index__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-6)}
.bl-service .hub-index__grid--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.bl-service .hub-index a{
  display:grid;grid-template-columns:auto minmax(0,1fr) 18px;gap:var(--space-4);align-items:center;
  padding:var(--space-4) 0;color:inherit;text-decoration:none;
  border-bottom:var(--border-width) solid var(--grey-050);
}
.bl-service .hub-index a:hover{color:inherit}
.bl-service .hub-index .n{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);color:var(--blue-600);
}
.bl-service .hub-index .t{
  display:block;font-family:var(--font-heading);font-size:var(--text-body-md);font-weight:var(--weight-medium);
  color:var(--text-heading);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);
  transition:color var(--duration-base) var(--ease-out);
}
.bl-service .hub-index .d{display:block;font-size:var(--text-caption);color:var(--text-muted);line-height:1.5;margin-top:2px}
.bl-service .hub-index .go{display:flex;align-items:center;opacity:0;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out)}
.bl-service .hub-index .go svg{width:16px;height:16px;stroke:var(--blue-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bl-service .hub-index a:hover .t{color:var(--blue-600)}
.bl-service .hub-index a:hover .go{opacity:1;transform:translateX(3px)}

/* platform variant: logo instead of an index number, boxed rather than ruled */
.bl-service .hub-index__grid--three a{
  border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5);grid-template-columns:minmax(0,1fr) 18px;
  align-items:center;transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
.bl-service .hub-index__grid--three a:hover{border-color:var(--blue-100);box-shadow:var(--shadow-sm)}
.bl-service .hub-index__grid--three img{height:22px;width:auto;max-width:110px;object-fit:contain;margin-bottom:var(--space-2)}

@media(max-width:980px){
  .bl-service .hub-index__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-service .hub-index__grid--three{grid-template-columns:1fr}
}
@media(max-width:640px){
  .bl-service .hub-hero{padding:var(--space-9) 0 calc(var(--space-9) + var(--space-7))}
  .bl-service .hub-hero__mark{display:none}
  .bl-service .hub-index{padding:var(--space-5);margin-top:calc(var(--space-7) * -1)}
  .bl-service .hub-index__grid{grid-template-columns:1fr}
}

/* no rule under the final row, at each column count */
.bl-service .hub-index__grid a:nth-last-child(-n+3){border-bottom:0}
@media(max-width:980px){.bl-service .hub-index__grid a:nth-last-child(-n+3){border-bottom:var(--border-width) solid var(--grey-050)}
  .bl-service .hub-index__grid a:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:640px){.bl-service .hub-index__grid a:nth-last-child(-n+2){border-bottom:var(--border-width) solid var(--grey-050)}
  .bl-service .hub-index__grid a:last-child{border-bottom:0}}
.bl-service .hub-index__grid--three a{border-bottom:var(--border-width) solid var(--border-subtle) !important}