/* Neurosalud - Home professional showcase.
   Work item: home-professionals-showcase-v1 (Phase 2).

   Adds ONLY the "Conoce a nuestros profesionales" section below the accepted
   exploration paths. Nothing here selects .ns-hero, its curve or decor, the
   breathing module, .ns-paths or any of its cards, #footer, Blocksy footer
   rows, or the Professionals/Resources pages.

   Geometry measured from prototype/refHome.png (1448x1086, ~1:1 with 1440):
     heading ink        x 196-436   y 930-948   ('C' cap 14px, same as the
                                                 exploration heading's 15px)
     directory action   x 1086-1241 y 934-945
     card row           x 202-1245  cards 349 wide, ~8px gaps
     portrait block     x 205-339   (135 wide, rounded rect, portrait ratio)
     name ink           y 989-1004  role y 1018-1029  summary y 1039-1051
   The reference is cropped at y=1086, so the card's lower half is not visible.
   Card height, the bottom-aligned action and the equal-height behaviour are
   taken from review/home-impeccable-audit.md, which specifies "equal-height
   cards and bottom-aligned actions ... match the existing directory system
   without copying its full filter-page density". */

.ns-showcase{
  --nsh-measure:1040px;
  --nsh-gutter:20px;

  --nsh-card:#F9FAFC;
  --nsh-border:#EAEDF3;
  --nsh-border-hover:#D6DEEA;
  --nsh-radius:18px;
  --nsh-serif:"Lora",Georgia,serif;
  --nsh-action-h:44px;

  position:relative;

  /* The exploration section above already carries the surface down from the
     Hero's bowl; this continues it. A plain background is clipped to its own
     border box, so it cannot reach the footer. */
  background-color:var(--ns-surface,#F5F6F8);

  /* prototype/refHome.png puts ~33px between the exploration cards and this
     heading. The exploration section keeps its accepted 64px bottom padding
     untouched, so the remainder is taken back here. The pulled-up area is that
     section's empty bottom padding and both paint the same surface, so nothing
     overlaps visually. */
  margin-top:-30px;

  --padding-block-start:0px;
  --padding-block-end:64px;
  --padding-inline-start:max(var(--nsh-gutter), calc((100% - var(--nsh-measure)) / 2));
  --padding-inline-end:max(var(--nsh-gutter), calc((100% - var(--nsh-measure)) / 2));
}

/* ==================== SECTION HEADER ROW ==================== */

.ns-showcase > .ns-showcase__head{
  display:flex;
  /* Elementor drives .e-con with --flex-direction:column; the heading/action
     row has to restate the direction or the action stacks under the title. */
  flex-direction:row;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
  margin:0 0 18px;

  --width:100%;
  --row-gap:0px;
  --column-gap:0px;
  --padding-block-start:0px;
  --padding-block-end:0px;
  --padding-inline-start:0px;
  --padding-inline-end:0px;
}

.ns-showcase__title,
.ns-showcase__title .elementor-heading-title{
  font-family:var(--nsh-serif);
  font-size:clamp(20px, 1.6vw, 23px);   /* matches the exploration heading */
  line-height:1.3;
  font-weight:500;
  color:var(--ns-primary-deep,#0B3D91);
  margin:0;
  overflow-wrap:anywhere;
}

.ns-showcase__head > .ns-showcase__all{ --width:auto; }
.ns-showcase__all .elementor-button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:var(--nsh-action-h);
  padding:0 2px;
  border:0;
  border-radius:8px;
  background:transparent;
  box-shadow:none;
  font-family:var(--ns-sans);
  font-size:14px;
  font-weight:500;
  line-height:1;
  color:var(--ns-primary,#1764C0);
}
.ns-showcase__all .elementor-button:hover,
.ns-showcase__all .elementor-button:focus-visible{
  color:var(--ns-primary-deep,#0B3D91);
  background:transparent;
  text-decoration:underline;
}
.ns-showcase__all .elementor-button-content-wrapper{
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.ns-showcase__all .elementor-button-icon{
  display:inline-flex; align-items:center; justify-content:center;
  margin:0;
  transition:transform .25s ease;
}
.ns-showcase__all .elementor-button-icon i{ font-size:15px; line-height:1; }
.ns-showcase__all .elementor-button-icon svg{
  width:16px; height:16px; fill:currentColor; display:block;
}
.ns-showcase__all .elementor-button:hover .elementor-button-icon{ transform:translateX(3px); }

/* ==================== DYNAMIC CARD ROW ====================
   Rendered by [neurosalud_home_profesionales]; never authored in Elementor. */

.nsh-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;                              /* reference gaps measure ~8px */
  align-items:stretch;                   /* equal-height cards */
}
.nsh-cell{ margin:0; display:flex; min-width:0; }

.nsh-card{
  flex:1 1 auto;
  min-width:0;
  display:grid;
  /* The row height was set by the longest summary wrapping to four lines in a
     168px column. Narrowing the portrait and tightening the padding widens the
     copy to ~200px, which drops that card to three lines and takes the whole
     row down with it - no text is truncated and no type is shrunk. */
  grid-template-columns:106px minmax(0,1fr);
  column-gap:12px;
  align-items:stretch;
  padding:9px 14px 9px 9px;

  background:var(--nsh-card);
  border:1px solid var(--nsh-border);
  border-radius:var(--nsh-radius);
  box-shadow:0 1px 2px rgba(23,63,102,.03);
  transition:border-color .25s ease, box-shadow .25s ease;
}
.nsh-card:hover,
.nsh-card:focus-within{
  border-color:var(--nsh-border-hover);
  box-shadow:0 4px 14px rgba(23,63,102,.05);
}

/* ---- portrait ----
   Reuses the directory's .nsp-avatar so the featured image and the initials
   fallback behave identically in both places; only the shape changes, because
   the reference draws a rounded portrait rectangle here, not the directory's
   circular thumbnail. */
.nsh-card .nsh-card__portrait.nsp-avatar{
  flex:none;
  width:100%;
  height:100%;
  min-height:120px;
  aspect-ratio:auto;
  border-radius:12px;
  align-self:stretch;
}
.nsh-card .nsp-avatar__initials{ font-size:34px; }

/* ---- body ---- */
.nsh-card__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:12px 0 8px;
}
.nsh-card__name{
  font-family:var(--nsh-serif);
  font-size:17px;
  line-height:1.24;
  font-weight:500;
  color:var(--ns-primary-deep,#0B3D91);
  margin:0 0 6px;
  overflow-wrap:anywhere;
}
/* The name is the card's secondary route to the same profile as "Ver perfil".
   Its hit area is padded out to clear 44px and the padding is cancelled by an
   equal negative margin, so the target grows without moving any text. */
.nsh-card__name a{
  display:inline-block;
  color:inherit;
  text-decoration:none;
  padding-block:12px;
  margin-block:-12px;
}
.nsh-card__name a:hover,
.nsh-card__name a:focus-visible{ text-decoration:underline; }

.nsh-card__role{
  font-family:var(--ns-sans);
  font-size:13px;
  line-height:1.35;
  font-weight:400;
  color:var(--ns-primary,#1764C0);
  margin:0 0 5px;
  overflow-wrap:anywhere;
}
.nsh-card__summary{
  font-family:var(--ns-sans);
  font-size:12.5px;
  line-height:1.45;
  color:var(--ns-primary,#1764C0);
  margin:0 0 10px;
  overflow-wrap:anywhere;
}

/* ---- action: bottom-aligned across every card in the row ---- */
.nsh-card__action{ margin:auto 0 0; }
.nsh-card__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  /* The box stays a full 44px target; the negative top margin only reclaims
     the leading above it, closing the gap under the summary. */
  min-height:var(--nsh-action-h);
  margin-top:-8px;
  font-family:var(--ns-sans);
  font-size:13px;
  font-weight:500;
  color:var(--ns-primary,#1764C0);
  text-decoration:none;
}
.nsh-card__link .nsp-i{ width:16px; height:16px; transition:transform .22s ease; }
.nsh-card__link:hover,
.nsh-card__link:focus-visible{
  color:var(--ns-primary-deep,#0B3D91);
  text-decoration:underline;
}
.nsh-card__link:hover .nsp-i{ transform:translateX(3px); }

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

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

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

/* Tablet: two columns, with the third card spanning the row so it reads as a
   deliberate third profile rather than an orphan. */
@media (max-width:1024px){
  .ns-showcase{ --nsh-gutter:24px; --padding-block-end:56px; }
  .nsh-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
  .nsh-cell:nth-child(3){ grid-column:1 / -1; }
  .nsh-cell:nth-child(3) .nsh-card{ grid-template-columns:130px minmax(0,1fr); }
}

/* Mobile: one column, 20px page gutters, nothing below target size. */
@media (max-width:767px){
  .ns-showcase{ --nsh-gutter:20px; --padding-block-end:48px; margin-top:-18px; }
  .ns-showcase > .ns-showcase__head{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin-bottom:14px;
  }
  .ns-showcase__title,
  .ns-showcase__title .elementor-heading-title{ font-size:20px; }
  .nsh-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .nsh-cell:nth-child(3){ grid-column:auto; }
  .nsh-card,
  .nsh-cell:nth-child(3) .nsh-card{ grid-template-columns:106px minmax(0,1fr); }
  .nsh-card .nsh-card__portrait.nsp-avatar{ min-height:118px; }
  .nsh-card .nsp-avatar__initials{ font-size:30px; }
  .nsh-card__summary{ font-size:13px; }
}

@media (max-width:420px){
  .nsh-card,
  .nsh-cell:nth-child(3) .nsh-card{ grid-template-columns:96px minmax(0,1fr); }
  .nsh-card .nsh-card__portrait.nsp-avatar{ min-height:110px; }
  .nsh-card .nsp-avatar__initials{ font-size:26px; }
}

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

@media (prefers-reduced-motion:reduce){
  .nsh-card,
  .nsh-card__link .nsp-i,
  .ns-showcase__all .elementor-button-icon{ transition:none !important; }
  .nsh-card__link:hover .nsp-i,
  .ns-showcase__all .elementor-button:hover .elementor-button-icon{ transform:none; }
}