/* LEGACY GENETIX TILES + MONTH BAND
   Shared by the homepage (THIS MONTH AT WELLGREENS) and the new pages. */
/* tiles: one pops, the rest are smaller, all show a cue */
.tiles{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;grid-auto-rows:minmax(150px,auto);gap:14px}
.tile{position:relative;display:grid;grid-template-columns:40% 1fr;align-items:center;border:var(--bb) solid var(--ink);background:var(--c,var(--teal));color:var(--cream);text-decoration:none;box-shadow:6px 6px 0 var(--ink);overflow:hidden;isolation:isolate;transition:transform .15s, box-shadow .15s}
.tile:hover{transform:translate(-3px,-3px) rotate(-.4deg);box-shadow:9px 9px 0 var(--ink)}
.tile:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.tile .ph{display:grid;place-items:center;padding:10px 2px 10px 8px;height:100%}
.tile .ph img{height:130px;width:auto;filter:drop-shadow(4px 6px 0 rgba(2,42,51,.35));transition:transform .3s}
.tile:hover .ph img{transform:rotate(-4deg) scale(1.04)}
.tile .tx{padding:12px 12px 12px 4px}
.tile .ty{display:inline-block;font-size:.6rem;letter-spacing:.16em;border:2px solid var(--cream);padding:2px 6px;font-weight:700}
.tile h3{font-family:var(--display);font-weight:400;font-size:clamp(.82rem,1.25vw,1.05rem);overflow-wrap:anywhere;line-height:1.02;margin:7px 0 4px}
.tile .pr{font-size:.72rem;letter-spacing:.1em}
.tile .pr b{font-family:var(--display);font-weight:400;font-size:1.2em}
.tile .cue{display:inline-flex;gap:5px;align-items:center;margin-top:8px;font-size:.6rem;letter-spacing:.16em;font-weight:700;border-bottom:2px solid var(--cream)}
.tile .wm{position:absolute;right:-26px;bottom:-30px;width:140px;height:100px;background:var(--cream);opacity:0;-webkit-mask:url(/img/logo-icon.svg) center/contain no-repeat;mask:url(/img/logo-icon.svg) center/contain no-repeat;transition:opacity .35s, transform .35s;z-index:-1;transform:rotate(-12deg)}
.tile:hover .wm,.tile:focus-visible .wm{opacity:.16;transform:rotate(-4deg)}
.tile.lead{grid-row:span 2;grid-template-columns:1fr;text-align:center;box-shadow:10px 10px 0 var(--ink);border-width:5px}
.tile.lead .ph img{height:250px}
.tile.lead h3{font-size:1.9rem}
.tile.lead .tx{padding:6px 16px 18px}
.tile.lead .flag{position:absolute;left:-4px;top:12px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);font-family:var(--display);font-size:.72rem;padding:4px 10px;letter-spacing:.06em;transform:rotate(-4deg);z-index:3}
.tile.more{background:var(--cream);color:var(--ink);grid-template-columns:1fr;text-align:center;place-content:center;padding:12px}
.tile.more .cue{border-color:var(--ink)}
.tile.more h3{font-size:1.15rem}
.tile.more svg.big{width:44px;height:44px;margin:0 auto;fill:none;stroke:currentColor;stroke-width:2.4}
.tilegrid-note{margin-top:12px;font-size:.72rem;letter-spacing:.12em;text-align:center}
@media (max-width:860px){
  .tiles{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:8px}
  .tile{grid-template-columns:1fr;text-align:center;box-shadow:4px 4px 0 var(--ink);border-width:3px}
  .tile .ph{padding:6px 4px 0;height:auto}
  .tile .ph img{height:84px}
  .tile .tx{padding:3px 5px 8px}
  .tile .ty{font-size:.46rem;padding:1px 4px;letter-spacing:.1em}
  .tile h3{font-size:.66rem;margin:4px 0 2px;letter-spacing:0}
  .tile .pr{font-size:.52rem;letter-spacing:.04em}
  .tile .cue{font-size:.46rem;letter-spacing:.08em;margin-top:4px}
  .tile .cue svg{display:none}
  .tile.lead{grid-column:1/-1;grid-row:auto;grid-template-columns:96px 1fr;text-align:left;box-shadow:5px 5px 0 var(--ink);border-width:4px}
  .tile.lead .ph img{height:132px}
  .tile.lead h3{font-size:1.3rem}
  .tile.lead .tx{padding:10px 10px 10px 0}
  .tile.lead .ty{font-size:.56rem}
  .tile.lead .pr{font-size:.7rem}
  .tile.lead .cue{font-size:.56rem}
  .tile.lead .flag{font-size:.56rem;top:6px;left:-3px;padding:2px 7px}
  .tile.more{padding:6px}
  .tile.more h3{font-size:.66rem}
  .tile.more svg.big{width:26px;height:26px}
  .tilegrid-note{font-size:.58rem}
}

/* month band (homepage + hub) */
.month{background:var(--cream)}
.month .field{opacity:.04;background-image:url(/img/logo-icon.svg)}
.month .checked{display:inline-flex;gap:8px;align-items:center;margin-top:10px;background:var(--ink);color:var(--cream);padding:6px 12px;font-size:.74rem;letter-spacing:.16em;font-weight:700;border:3px solid var(--ink)}
.month .fineprint{margin-top:14px;text-align:center;font-size:.7rem;letter-spacing:.1em;line-height:1.5}
.month .fineprint a{font-weight:700}
@media (max-width:860px){.month .checked{font-size:.58rem;padding:4px 8px}.month .fineprint{font-size:.56rem}}

.tile.more .cue{margin:8px auto 0}