/* MODERA 2026-10-09 / FINAL: persistent banner, matching pastel home cards. */
/* Make the two formerly dark tiles ordinary, readable pastel cards. */
#home .grid > .tile.modera3d-tile {
  background:linear-gradient(145deg,#fff2da,#ffdfaa)!important;
  color:#664919!important;
  border:1px solid rgba(18,42,63,.12)!important;
}
#home .grid > .tile.community-wide-tile {
  background:linear-gradient(145deg,#eee8ff,#d7e0ff)!important;
  color:#403d7a!important;
  grid-column:auto!important;
  grid-row:auto!important;
  border:1px solid rgba(18,42,63,.12)!important;
  min-width:0!important;
}
#home .grid > .tile.community-wide-tile span,
#home .grid > .tile.community-wide-tile small {color:inherit!important;text-shadow:none!important}
/* An advertisement is shared by ALL pages: never move or collapse its parent. */
#mainApp > header.top {position:sticky!important;top:0!important;z-index:100!important;overflow:visible!important;}
#mainApp > header.top > #moderaGlobalAdHost {display:block!important;visibility:visible!important;position:relative!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;min-width:0!important;flex:0 0 auto!important;}
#mainApp > header.top > #moderaGlobalAdHost > #adSlider,
#mainApp > header.top > #moderaGlobalAdHost > #adSlider[hidden] {
  display:block!important;visibility:visible!important;position:relative!important;
  height:106px!important;min-height:106px!important;max-height:106px!important;
  margin:0!important;box-sizing:border-box!important;overflow:hidden!important;
  width:100%!important;border-radius:12px!important;background:#fff!important;
}
#mainApp #adSlider .adSliderViewport,
#mainApp #adSlider .adSliderTrack,
#mainApp #adSlider .adSlide {height:100%!important;width:100%!important;min-height:0!important;}
#mainApp #adSlider .adSlide {flex:0 0 100%!important;}
#mainApp #adSlider .adSlideLink {display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;height:100%!important;min-height:0!important;}
#mainApp #adSlider .adSlide img,
#mainApp #adSlider .adSlideLink img {
  display:block!important;max-width:100%!important;max-height:100%!important;
  width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;
}
/* No extra ad copies in community or marketplace. */
#communityAds,#marketAds{display:none!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;}
/* Avoid any old 'empty advert' rules changing layout as slides refresh. */
#adSlider[hidden] {display:block!important;}
@media(max-width:699px){
  #mainApp > header.top > #moderaGlobalAdHost > #adSlider,
  #mainApp > header.top > #moderaGlobalAdHost > #adSlider[hidden]{
    height:clamp(78px,23vw,100px)!important;
    min-height:clamp(78px,23vw,100px)!important;
    max-height:clamp(78px,23vw,100px)!important;
  }
}


/* 2026-10-09 FINAL MOBILE VISUAL REGRESSION FIX */
/* 1. Keep the social tile pastel, but stretch it across the entire last row.
   Earlier release accidentally used grid-column:auto and left two empty cells. */
#home .grid > a.tile.community-wide-tile {
  grid-column:1 / -1!important;
  grid-row:auto!important;
  min-height:98px!important;
  font-size:clamp(14px,2.1vw,20px)!important;
  padding:12px 16px!important;
  gap:5px!important;
  display:flex!important;
  flex-flow:column nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#eee8ff,#d7e0ff)!important;
  color:#403d7a!important;
}
#home .grid > a.tile.community-wide-tile span {font-size:inherit!important;line-height:1.15!important;overflow-wrap:normal!important;max-width:100%!important}
#home .grid > a.tile.community-wide-tile small {font-size:.75em!important;line-height:1.2!important;max-width:100%!important}
/* Let the sixth row grow naturally; never clip cards under a variable-height sticky ad. */
#home.screen.active {
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  display:block!important;
  padding:8px!important;
}
#home .grid {
  display:grid!important;
  flex:none!important;
  min-height:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:none!important;
  grid-auto-rows:minmax(108px,auto)!important;
  gap:7px!important;
}
#home .grid > .tile:not(.community-wide-tile) {
  min-height:108px!important;
  font-size:clamp(10px,2.7vw,14px)!important;
  padding:8px 5px!important;
}
/* 2. A single full-bleed advertisement below the header: enlarge proportionally,
   use cover to remove the letterboxed strips shown on iPhones. All ads share a
   stable aspect-ratio/height to prevent jumping between slides. */
#mainApp > header.top > #moderaGlobalAdHost {
  padding:5px 0 0!important;
  overflow:hidden!important;
  width:100%!important;
}
#mainApp > header.top > #moderaGlobalAdHost > #adSlider,
#mainApp > header.top > #moderaGlobalAdHost > #adSlider[hidden] {
  height:clamp(105px,18vw,185px)!important;
  min-height:clamp(105px,18vw,185px)!important;
  max-height:clamp(105px,18vw,185px)!important;
  width:100%!important;
  border-radius:10px!important;
  border:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:#fff!important;
}
#mainApp #adSlider .adSliderViewport,
#mainApp #adSlider .adSliderTrack,
#mainApp #adSlider .adSlide,
#mainApp #adSlider .adSlideLink {width:100%!important;height:100%!important;min-height:0!important}
#mainApp #adSlider .adSlide,
#mainApp #adSlider .adSlideLink {padding:0!important;margin:0!important;overflow:hidden!important}
#mainApp #adSlider .adSlide img,
#mainApp #adSlider .adSlideLink img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}
/* Do not show a second community or marketplace ad area. */
#communityAds,#marketAds {display:none!important}
@media(min-width:700px) {
  #home .grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:minmax(115px,auto)!important}
  #home .grid > .tile:not(.community-wide-tile){min-height:115px!important}
}
@media(max-width:699px) {
  #mainApp > header.top > #moderaGlobalAdHost > #adSlider,
  #mainApp > header.top > #moderaGlobalAdHost > #adSlider[hidden] {
    height:clamp(98px,29vw,138px)!important;
    min-height:clamp(98px,29vw,138px)!important;
    max-height:clamp(98px,29vw,138px)!important;
  }
  #home .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:minmax(103px,auto)!important}
  #home .grid > .tile:not(.community-wide-tile){min-height:103px!important}
  #home .grid > .tile.community-wide-tile{grid-column:1/-1!important;min-height:95px!important}
}
@media(max-width:350px){
  #home .grid > a.tile.community-wide-tile {font-size:13px!important;padding:10px 6px!important}
}