/* Neurosalud - Home exploration paths.
   Work item: home-exploration-paths-v1 (Phase 1).

   Adds ONLY the first section below the accepted Hero curve. Nothing here
   selects .ns-hero, its decor layers, the breathing module, the woman art or
   the single ::after curve, and nothing here touches the global header/footer.

   Geometry measured from prototype/refHome.png (1448x1086, ~1:1 with 1440):
     curve apex (centre)      y 635        heading ink   y 728-749, x 585-855
     card band                y 766-890    card size     329 x 124, gap ~24
     row span                 x 201-1237   (1036 wide, centred)
     icon glyph               29 x 37 at card centre-left
     title ink                y 791-807    copy 3 lines, line-height ~17
     arrow                    16 x 13, 18px from the card's right edge */

.ns-paths{
  /* How far the section rises into the curve's white bowl. The Hero's sagitta
     is 10.63vw, so expressing the rise in vw keeps the heading at the same
     relative depth inside the bowl at every width instead of drifting out of
     it on smaller screens. Reference: 64px of rise at 1440 = 4.4vw. */
  --ns-paths-rise:min(4.4vw, 72px);
  --ns-paths-pad:40px;
  --ns-paths-measure:1040px;
  --ns-paths-gutter:20px;

  --ns-path-card:#F9FAFC;
  --ns-path-border:#EAEDF3;
  --ns-path-border-hover:#D6DEEA;
  --ns-path-disc:rgba(23,63,102,.028);   /* reference disc is ~2 steps off the card, not a grey tile */
  --ns-path-radius:18px;
  --ns-path-serif:"Lora",Georgia,serif;

  /* The distance the section's box starts above the Hero's bottom edge. The
     seam fill and the negative margin are both derived from this one value, so
     they can never disagree. */
  --ns-paths-lift:calc(var(--ns-paths-rise) + var(--ns-paths-pad));

  position:relative;
  margin-top:calc(-1 * var(--ns-paths-lift));

  /* Continues the curve's own fill from the Hero's bottom edge downward so the
     bowl and the page beneath it are one surface; without it the body colour
     (#FAFBFC) meets the curve fill (#F5F6F8) in a visible horizontal seam.

     This is painted as the section's OWN background rather than a pseudo-
     element. A background box is clipped to its border box by definition, so
     this layer cannot paint past the section under any circumstances. The
     previous ::before could: .ns-paths is an Elementor container, and
     Elementor's own `.e-con:before` rule (frontend.min.css) sets
     `height: max(100% + …, 100%)` on that same pseudo-element for its
     background-overlay feature. With `top`, `bottom` and `height` all non-auto
     the CSS box model drops `bottom`, so the layer resolved to top:lift +
     height:100% and overhung the section by exactly `lift`, painting grey
     across the top band of the global footer. */
  background-color:transparent;              /* the Hero's bowl must show through */
  background-image:linear-gradient(var(--ns-surface,#F5F6F8), var(--ns-surface,#F5F6F8));
  background-repeat:no-repeat;
  background-origin:padding-box;
  background-clip:padding-box;
  background-position:left var(--ns-paths-lift);
  background-size:100% calc(100% - var(--ns-paths-lift));
  --padding-block-start:var(--ns-paths-pad);
  --padding-block-end:64px;
  --padding-inline-start:max(var(--ns-paths-gutter), calc((100% - var(--ns-paths-measure)) / 2));
  --padding-inline-end:max(var(--ns-paths-gutter), calc((100% - var(--ns-paths-measure)) / 2));
}

/* ==================== SECTION HEADING ==================== */

.ns-paths__title,
.ns-paths__title .elementor-heading-title{
  font-family:var(--ns-path-serif);
  font-size:clamp(20px, 1.6vw, 23px);
  line-height:1.3;
  font-weight:500;
  color:var(--ns-primary-deep,#0B3D91);
  text-align:center;
  margin:0 0 16px;
}

/* ==================== CARD ROW ==================== */

.ns-paths__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
  --width:100%;
  --row-gap:0px;
  --column-gap:0px;
  --padding-block-start:0px;
  --padding-block-end:0px;
  --padding-inline-start:0px;
  --padding-inline-end:0px;
}

/* ==================== ONE REUSABLE CARD PATTERN ====================
   Every card is the same container class with the same four slots:
   icon / title / copy / action. The third card swaps only its action slot
   for an honest pending state; nothing else about the pattern changes. */

.ns-paths__grid > .ns-path{
  /* Two columns only. The reference gives the copy the full width of the card
     and drops the arrow into the bottom-right corner rather than reserving a
     third column for it; a third column narrows the copy to 153px (vs the
     reference's 221px), which forces four-line wraps and stretches the whole
     row. The action is therefore positioned in a reserved bottom strip. */
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:16px;
  row-gap:6px;
  align-items:start;
  align-content:center;
  min-height:124px;

  background:var(--ns-path-card);
  border:1px solid var(--ns-path-border);
  border-radius:var(--ns-path-radius);
  box-shadow:0 1px 2px rgba(23,63,102,.03);
  transition:border-color .25s ease, box-shadow .25s ease;

  --width:100%;
  --row-gap:0px;
  --column-gap:0px;
  --padding-block-start:20px;
  --padding-block-end:40px;      /* reserved strip for the 44px action target */
  --padding-inline-start:18px;
  --padding-inline-end:18px;
}

/* Quiet hover: the border resolves, nothing lifts or grows. */
.ns-paths__grid > .ns-path:not(.ns-path--pending):hover,
.ns-paths__grid > .ns-path:focus-within{
  border-color:var(--ns-path-border-hover);
  box-shadow:0 4px 14px rgba(23,63,102,.05);
}

/* ---- slot 1: icon ---- */
.ns-path > .ns-path__icon{
  grid-column:1;
  grid-row:1 / span 2;
  align-self:center;
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--ns-path-disc);
  color:var(--ns-primary,#1764C0);
  --width:auto;
}
.ns-path__icon .elementor-icon,
.ns-path__icon a{ color:inherit; }
/* Elementor renders the icon control as <i> or as inline SVG depending on the
   icon library, so both are sized here. */
.ns-path__icon .elementor-icon i{ font-size:27px; line-height:1; color:inherit; }
.ns-path__icon .elementor-icon svg{
  width:28px; height:28px; fill:currentColor; display:block;
}

/* ---- slot 2: title ---- */
.ns-path > .ns-path__title{
  grid-column:2;
  grid-row:1;
  --width:auto;
}
.ns-path__title,
.ns-path__title .elementor-heading-title{
  font-family:var(--ns-path-serif);
  font-size:17px;
  line-height:1.24;
  font-weight:500;
  color:var(--ns-primary-deep,#0B3D91);
  margin:0;
  overflow-wrap:anywhere;
}

/* ---- slot 3: supporting copy ---- */
.ns-path > .ns-path__copy{
  grid-column:2;
  grid-row:2;
  --width:auto;
}
.ns-path__copy p{
  font-family:var(--ns-sans);
  font-size:12.5px;
  line-height:1.44;
  color:var(--ns-primary,#1764C0);
  margin:0;
  overflow-wrap:anywhere;
}

/* ---- slot 4a: action (cards with a real destination) ---- */
.ns-path > .ns-path__action{
  position:absolute;
  right:12px;
  bottom:4px;
  --width:auto;
}
.ns-path__action .elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;                        /* the whole arrow is the 44px target */
  height:44px;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ns-primary,#1764C0);
  box-shadow:none;
  transition:background-color .25s ease, color .25s ease;
}
.ns-path__action .elementor-button:hover,
.ns-path__action .elementor-button:focus-visible{
  background:rgba(23,100,192,.08);
  color:var(--ns-primary-deep,#0B3D91);
}
/* The reference shows an arrow with no label. The label is kept in the DOM as
   the button's accessible name and hidden visually, so the control is never an
   unlabelled icon for assistive technology. Editing it in Elementor changes
   the accessible name. */
.ns-path__action .elementor-button-text{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.ns-path__action .elementor-button-content-wrapper{
  display:flex; align-items:center; justify-content:center;
}
.ns-path__action .elementor-button-icon{
  display:inline-flex; align-items:center; justify-content:center;
  margin:0;
  transition:transform .25s ease;
}
.ns-path__action .elementor-button-icon i{ font-size:17px; line-height:1; }
.ns-path__action .elementor-button-icon svg{
  width:18px; height:18px; fill:currentColor; display:block;
}
.ns-path__action .elementor-button:hover .elementor-button-icon{ transform:translateX(3px); }

/* ---- slot 4b: action (pending destination) ----
   Honest, non-interactive, and never styled as a link or button. Occupies the
   same reserved strip as the arrow so the pattern stays identical. */
.ns-path > .ns-path__state{
  position:absolute;
  right:14px;
  bottom:12px;
  --width:auto;
}
.ns-path__state p{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin:0;
  padding:0 11px;
  border-radius:999px;
  background:rgba(23,63,102,.05);
  border:1px solid var(--ns-path-border);
  font-family:var(--ns-sans);
  font-size:11.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.01em;
  color:var(--ns-muted,#667F96);
  white-space:nowrap;
  cursor:default;
}

/* ==================== FOCUS VISIBILITY ==================== */

.ns-paths a:focus-visible,
.ns-paths button:focus-visible{
  outline:2px solid var(--ns-primary,#1764C0);
  outline-offset:3px;
}

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

/* Tablet: two columns, with the third card deliberately spanning the row so it
   reads as an intentional third path rather than an orphan. */
@media (max-width:1024px){
  .ns-paths{ --ns-paths-gutter:24px; --padding-block-end:56px; }
  .ns-paths__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; }
  .ns-paths__grid > .ns-path:nth-child(3){ grid-column:1 / -1; }
  .ns-paths__grid > .ns-path{ min-height:120px; }
}

/* Mobile: one column, 20px page gutters, nothing shrinks below target size. */
@media (max-width:767px){
  .ns-paths{ --ns-paths-gutter:20px; --padding-block-start:32px; --padding-block-end:48px; }
  .ns-paths__title,
  .ns-paths__title .elementor-heading-title{ font-size:20px; margin-bottom:18px; }
  .ns-paths__grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .ns-paths__grid > .ns-path:nth-child(3){ grid-column:auto; }
  .ns-paths__grid > .ns-path{
    min-height:0;
    --padding-inline-start:16px;
    --padding-inline-end:16px;
  }
  .ns-path > .ns-path__icon{ width:56px; height:56px; }
  .ns-path__icon .elementor-icon i{ font-size:24px; }
  .ns-path__icon .elementor-icon svg{ width:25px; height:25px; }
  .ns-path__copy p{ font-size:13px; }
}

/* ==================== REDUCED MOTION ==================== */

@media (prefers-reduced-motion:reduce){
  .ns-paths__grid > .ns-path,
  .ns-path__action .elementor-button,
  .ns-path__action .elementor-button-icon{ transition:none !important; }
  .ns-path__action .elementor-button:hover .elementor-button-icon{ transform:none; }
}