/* WCC Veterans — Best Wishes in-content framed letters
   Controlled scope: homepage hero gallery + antique letter viewer only.
   Best Wishes is honorary content, never header/category navigation. */

.wcc-wishes-hero-gallery{
  position:absolute;
  z-index:4;
  right:clamp(24px,3.4vw,56px);
  top:50%;
  width:clamp(112px,9vw,134px);
  transform:translateY(-53%);
  pointer-events:auto;
}
.wcc-wishes-hero-gallery__title{
  margin:0 0 11px;
  color:#f1dfaa;
  text-align:center;
  font:600 clamp(12px,.95vw,14px)/1.15 Georgia,"Times New Roman",serif;
  letter-spacing:.10em;
  text-transform:none;
  text-shadow:
    0 1px 3px rgba(0,0,0,.70),
    0 0 7px rgba(223,188,108,.16);
}
.wcc-wishes-hero-gallery__frames{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wcc-wishes-mini-frame{
  position:relative;
  display:block;
  padding:4px 4px 5px;
  color:#fff9e9;
  text-decoration:none;
  background:
    linear-gradient(90deg,rgba(71,43,18,.28) 0 3%,transparent 3% 7%,rgba(255,234,174,.10) 7% 10%,transparent 10% 100%),
    linear-gradient(0deg,rgba(58,34,14,.20) 0 4%,transparent 4% 10%,rgba(249,225,163,.08) 10% 13%,transparent 13% 100%),
    linear-gradient(145deg,rgba(250,236,194,.22),transparent 31%),
    linear-gradient(135deg,#76502a 0%,#9b6f38 20%,#c29a55 49%,#8a5d30 76%,#68421f 100%);
  border:1px solid rgba(218,190,125,.90);
  outline:none;
  box-shadow:
    0 4px 10px rgba(0,0,0,.26),
    0 0 11px rgba(222,184,101,.18),
    0 0 2px rgba(255,239,188,.16),
    inset 0 0 0 1px rgba(58,34,14,.54);
  cursor:zoom-in;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.wcc-wishes-mini-frame::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:2px;
  border:1px solid rgba(255,235,183,.34);
  box-shadow:inset 0 0 0 1px rgba(74,45,19,.32);
  pointer-events:none;
}
.wcc-wishes-mini-frame::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:4px;
  border:1px solid rgba(78,48,21,.24);
  pointer-events:none;
}
.wcc-wishes-mini-frame:hover,
.wcc-wishes-mini-frame:focus-visible{
  transform:translateX(-1px);
  border-color:#dfca8e;
  box-shadow:
    0 6px 13px rgba(0,0,0,.30),
    0 0 17px rgba(231,193,105,.30),
    0 0 4px rgba(255,242,196,.22),
    inset 0 0 0 1px rgba(72,49,20,.38);
}
.wcc-wishes-mini-frame:focus-visible{
  outline:2px solid #f0d58f;
  outline-offset:3px;
}
.wcc-wishes-mini-frame img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:contain;
  object-position:center top;
  box-sizing:border-box;
  padding:1px;
  background:#f5efe2;
  border:1px solid rgba(91,61,29,.64);
  box-shadow:0 0 0 1px rgba(244,225,180,.28);
}
.wcc-wishes-mini-frame span{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:#f1e7cf;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:500 8.25px/1.2 Georgia,"Times New Roman",serif;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.72);
}

/* Antique full-letter viewer.  The frame width is constrained by both
   viewport width and viewport height so portrait letters retain their
   natural aspect ratio without cropping or distortion. */
.wcc-wishes-lightbox{
  position:fixed;
  z-index:10000;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  overflow:auto;
}
.wcc-wishes-lightbox::backdrop{
  background:rgba(4,15,11,.84);
  backdrop-filter:blur(3px);
}
.wcc-wishes-lightbox__stage{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,3vw,34px);
  background:transparent;
}
.wcc-wishes-lightbox--fallback .wcc-wishes-lightbox__stage{
  background:rgba(4,15,11,.84);
}
.wcc-wishes-lightbox__frame{
  position:relative;
  width:min(88vw,61vh,680px);
  margin:0;
  padding:clamp(9px,1.3vw,14px);
  background:
    linear-gradient(145deg,rgba(249,238,202,.20),transparent 31%),
    linear-gradient(135deg,#9a743b 0%,#c5a764 48%,#87602f 100%);
  border:1px solid rgba(225,202,143,.94);
  outline:none;
  box-shadow:
    0 20px 54px rgba(0,0,0,.52),
    inset 0 0 0 1px rgba(67,42,10,.46);
}
.wcc-wishes-lightbox__frame::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,235,177,.30);
  pointer-events:none;
}
.wcc-wishes-lightbox__image{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:78vh;
  margin:0 auto;
  object-fit:contain;
  background:#faf8f1;
  border:1px solid rgba(91,61,23,.72);
  box-shadow:0 4px 13px rgba(0,0,0,.28);
}
.wcc-wishes-lightbox__caption{
  position:relative;
  z-index:1;
  margin:8px 42px 0 2px;
  color:#fff3d1;
  font:600 12.5px/1.3 Georgia,"Times New Roman",serif;
}
.wcc-wishes-lightbox__close{
  position:absolute;
  z-index:3;
  right:-13px;
  top:-13px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:2px solid #efd28c;
  border-radius:50%;
  color:#fff8e8;
  background:#173f30;
  font:700 22px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(0,0,0,.45);
}
.wcc-wishes-lightbox__close:hover,
.wcc-wishes-lightbox__close:focus-visible{background:#215440}
.wcc-wishes-lightbox__close:focus-visible{
  outline:2px solid #f0d58f;
  outline-offset:3px;
}
body.wcc-wishes-modal-open{overflow:hidden}

/* Wide desktop: use a balanced 2+1 framed-gallery composition. A true
   three-across row was forensically rejected because it crosses the cricket
   ball at standard desktop widths. The 2+1 layout preserves the enlarged
   B3 frame size while giving Best Wishes a stronger horizontal presence. */
@media(min-width:1280px){
  .wcc-wishes-hero-gallery{
    width:calc(clamp(112px,9vw,134px) + clamp(112px,9vw,134px) + 12px);
  }
  .wcc-wishes-hero-gallery__frames{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 12px;
    align-items:start;
  }
  .wcc-wishes-mini-frame{
    min-width:0;
    box-sizing:border-box;
  }
  .wcc-wishes-mini-frame:nth-child(3){
    grid-column:1/-1;
    width:calc(50% - 6px);
    justify-self:center;
  }
}

/* Tablet: keep the frames in the existing open area to the right of the ball. */
@media(max-width:1180px) and (min-width:761px){
  .wcc-wishes-hero-gallery{
    right:clamp(18px,2vw,26px);
    width:clamp(94px,10.6vw,106px);
    transform:translateY(-52%);
  }
  .wcc-wishes-hero-gallery__frames{gap:8px}
  .wcc-wishes-mini-frame{padding:3px 3px 4px}
  .wcc-wishes-mini-frame span{font-size:7.5px}
}

/* B9A scaled-desktop bridge: on high-DPI / Windows-scaled desktop displays
   the effective CSS viewport can fall below 1280px even on a 1920px screen.
   Activate the approved 2+1 composition from 1080–1279px, but retain the
   tighter tablet-side clearance proven to avoid the cricket-ball region. */
@media(min-width:1080px) and (max-width:1279px){
  .wcc-wishes-hero-gallery{
    right:clamp(18px,2vw,26px);
    width:calc(clamp(112px,9vw,134px) + clamp(112px,9vw,134px) + 12px);
  }
  .wcc-wishes-hero-gallery__frames{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 12px;
    align-items:start;
  }
  .wcc-wishes-mini-frame{
    min-width:0;
    box-sizing:border-box;
    padding:4px 4px 5px;
  }
  .wcc-wishes-mini-frame span{font-size:8.25px}
  .wcc-wishes-mini-frame:nth-child(3){
    grid-column:1/-1;
    width:calc(50% - 6px);
    justify-self:center;
  }
}

/* Mobile has no meaningful "right of the ball" column. Keep the three
   letters inside the hero as a compact horizontal memorabilia row. Fresh
   Command 19 browser QA proved that the prior zero-reserve layout overlapped
   the action block, so a controlled bottom shelf is reserved on mobile only.
   Hero-copy padding and protected wording/content remain unchanged. */
@media(max-width:760px){
  /* Command 19 mobile fit correction: fresh browser QA proved the absolute
     memorabilia row overlapped the action block without a reserved mobile
     hero shelf. Reserve only the hero's bottom area; do not change hero-copy
     padding or any protected wording/content. */
  .home-hero{padding-bottom:110px}
  .wcc-wishes-hero-gallery{
    left:clamp(18px,3vw,22px);
    right:auto;
    top:auto;
    bottom:104px;
    width:auto;
    transform:none;
  }
  .wcc-wishes-hero-gallery__title{
    margin:0 0 7px;
    text-align:center;
    font-size:10.5px;
    letter-spacing:.10em;
  }
  .wcc-wishes-hero-gallery__frames{
    flex-direction:row;
    gap:6px;
    align-items:flex-end;
  }
  .wcc-wishes-mini-frame{
    flex:0 0 60px;
    width:60px;
    padding:3px;
  }
  .wcc-wishes-mini-frame span{display:none}
  .wcc-wishes-lightbox__stage{padding:16px 10px}
  .wcc-wishes-lightbox__frame{width:min(92vw,61vh);padding:8px}
  .wcc-wishes-lightbox__caption{margin-top:6px;font-size:11.5px}
  .wcc-wishes-lightbox__close{right:-8px;top:-10px;width:44px;height:44px}
}

@media(max-width:430px){
  .wcc-wishes-hero-gallery{bottom:104px}
  .wcc-wishes-hero-gallery__frames{gap:5px}
  .wcc-wishes-mini-frame{flex-basis:51px;width:51px}
}

@media(max-width:400px){
  .wcc-wishes-hero-gallery__frames{gap:4px}
  .wcc-wishes-mini-frame{flex-basis:50px;width:50px}
}


@media(prefers-reduced-motion:reduce){
  .wcc-wishes-mini-frame{transition:none}
}

/* B9B mobile-landscape bridge: short-height phones can expose a CSS width
   above the portrait-mobile breakpoint while the header is already in its
   compact mobile form.  Keep legitimate tablets unchanged, but in the
   761–1079px landscape/short-height band present all three Best Wishes
   frames as one compact horizontal row in the hero's upper-right open area.
   This avoids the incomplete-looking vertical stack without creating the
   deep bottom shelf that would fall below the first landscape viewport. */
@media (min-width:761px) and (max-width:1079px) and (max-height:620px) and (orientation:landscape){
  .wcc-wishes-hero-gallery{
    left:auto;
    right:18px;
    top:18px;
    bottom:auto;
    width:auto;
    transform:none;
  }
  .wcc-wishes-hero-gallery__title{
    margin:0 0 7px;
    text-align:center;
    font-size:10.5px;
    letter-spacing:.10em;
  }
  .wcc-wishes-hero-gallery__frames{
    display:flex;
    flex-direction:row;
    gap:6px;
    align-items:flex-end;
  }
  .wcc-wishes-mini-frame{
    flex:0 0 56px;
    width:56px;
    min-width:0;
    padding:3px;
    box-sizing:border-box;
  }
  .wcc-wishes-mini-frame:nth-child(3){
    width:56px;
    justify-self:auto;
  }
  .wcc-wishes-mini-frame span{display:none}
}