/* ══════════════════════════════════════════════════════════════════════
   THE HERO CARD - salute.nw
   ══════════════════════════════════════════════════════════════════════

   A man record should look like his country the moment it opens. His flag
   behind him, faded and tilted so it reads as cloth rather than a graphic.
   His service emblem on the right. His nation colours along the top edge.

   An Israeli airman and an American soldier should be told apart at a glance,
   without reading a word. Ten thousand Israeli dead are coming and this
   memorial should not make them look like Americans.
   ══════════════════════════════════════════════════════════════════════ */

/* A card, not a band. mem-subject-hero runs the full width with a border at
   the foot, so it butted straight into the tab strip and read as part of
   the furniture. A man record should sit on the page as its own thing. */
.sal-herocard{position:relative;overflow:hidden;
  /* No horizontal margin. mem-inset already owns the page horizontal padding
     and the breadcrumb above inherits it; a card adding its own sat further
     right than the crumb over it. One container owns the edge. */
  margin:0 0 1.4rem;
  padding:2.2rem 2rem 1.9rem;
  border:1px solid var(--mem-border);border-radius:8px;border-bottom:1px solid var(--mem-border);
  box-shadow:0 2px 14px rgba(0,0,0,.06)}

/* The flag. Tilted a few degrees and heavily faded - it is the room he
   stands in, not a banner over his head. */
/* contain, not cover. Cover crops to fill the card, which on the Israeli
   flag leaves part of a star and none of the blue bands - the whole point
   of a flag is the whole flag. */
.sal-herocard-flag{position:absolute;top:-6%;left:-4%;width:108%;height:112%;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  transform:rotate(-3.5deg);opacity:.085;pointer-events:none;z-index:0;
  filter:saturate(.85)}
[data-theme="dark"] .sal-herocard-flag{opacity:.13}

/* His service emblem, large and quiet at the right. */
/* His emblem at full strength. It is the badge of the service he served in,
   not a watermark. */
.sal-herocard-emblem{position:absolute;right:2rem;top:50%;transform:translateY(-50%);
  width:auto;height:150px;opacity:1;pointer-events:none;z-index:1}

/* Everything else above the cloth. */
.sal-herocard > .mem-subject-hero-inner{position:relative;z-index:2}

/* The nations. Their colours along the top edge, in the order they appear on
   the flag. A stranger should know whose memorial this is before reading. */
.sal-herocard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:3;border-radius:8px 8px 0 0;
  background:var(--sal-gold,#9a7b1f)}
/* The top edge is his nation colours, read from nw_colour. Nothing about a
   nation is written here: when Israel ten thousand arrive their pages are
   Israeli because the nation has colours, not because anyone edited this
   file. The hardcoded gradients that used to live here covered nine
   countries out of two hundred and fifty three. */
.sal-herocard.has-colours::before{
  background:linear-gradient(90deg,
    var(--nat-primary) 0 33.33%,
    var(--nat-secondary,var(--nat-primary)) 33.33% 66.66%,
    var(--nat-accent,var(--nat-primary)) 66.66%)}

/* And his service speaks where the service speaks. */
.sal-herocard.has-colours .sal-vet-portrait-bar{background:var(--svc-primary,var(--nat-primary))}
.sal-herocard.has-colours .sal-vet-eyebrow{color:var(--svc-primary,var(--nat-primary))}

@media (max-width:820px){
  .sal-herocard{padding:1.6rem 1.25rem 1.4rem;margin:0 0 1rem}
  .sal-herocard-emblem{height:88px;right:1rem}
}
@media (max-width:560px){
  .sal-herocard-emblem{display:none}
}



/* The tab strip, as a card. It was a square full-width band with a rule under

   it - browser furniture - sitting among cards with rounded corners and air

   around them. On its own that was defensible; among these it looked like

   something left over. A shade darker than the panels so it reads as a control

   rather than as content. Salute only: badge and ladder keep the band. */

.gate-salute .mem-subject-tabs{

  border:1px solid var(--sal-panel-border,var(--mem-border));

  border-radius:var(--sal-radius-lg,10px);

  background:var(--sal-surface2,rgba(0,0,0,.03));

  padding:.25rem .5rem;

  gap:.15rem;

  overflow-x:auto;

  -webkit-overflow-scrolling:touch;

}

.gate-salute .mem-subject-tab{

  border-radius:calc(var(--sal-radius,6px) - 1px);

  border-bottom:none;

  white-space:nowrap;

}

.gate-salute .mem-subject-tab.active{

  background:var(--sal-panel-bg,var(--mem-surface));

  border-bottom:none;

  box-shadow:0 1px 3px rgba(0,0,0,.08);

}

@media (max-width:640px){

  .gate-salute .mem-subject-tabs{padding:.2rem .3rem}

}