/* Atlas v322 — requested exact horizontal FREE card composition + fixed hero image frame.
   Overrides v321, deliberately limited to the ten generated atlas-v321-canonical pages.
   No modification to global 245 Atlas renderer. */

/* Consistent desktop hero dimensions: portrait species images NEVER change band height. */
@media(min-width:1221px){
 body.atlas-v321-canonical .invert-hero .hero-top{
   height:488px!important;min-height:488px!important;max-height:488px!important;
   align-items:stretch!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-top > :is(.invert-hero-copy-panel,.hero-media-panel,.hero-stats-panel){
   height:488px!important;max-height:488px!important;min-height:0!important;
   box-sizing:border-box!important;overflow:hidden!important;align-self:stretch!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel{
   display:flex!important;flex-direction:column!important;justify-content:space-between!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel .invert-photo-open{
   flex:1 1 auto!important;height:calc(100% - 32px)!important;min-height:0!important;max-height:calc(100% - 32px)!important;
   overflow:hidden!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel .invert-photo-open img{
   display:block!important;width:100%!important;height:100%!important;
   min-height:0!important;max-height:100%!important;object-fit:contain!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel .invert-photo-caption{
   flex:0 0 28px!important;max-height:28px!important;overflow:hidden!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-stats-panel{justify-content:center!important;overflow:hidden!important}
 body.atlas-v321-canonical .invert-hero .hero-stats-panel .stat{padding:8px 0!important;min-height:0!important}
 body.atlas-v321-canonical .invert-hero .invert-hero-copy-panel{justify-content:center!important}
}

/* Desktop FREE cards: each one full-width with an actual horizontal split.
   Left: media (or card title if no media); right: heading/description/link.
   No narrow vertical quarter-width card columns. */
body.atlas-v321-canonical #intro .free-card-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:15px!important;
  align-items:stretch!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal{
  display:grid!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  grid-column:1/-1!important;
  grid-row:auto!important;
  float:none!important;
  margin:0!important;
  align-items:stretch!important;
  grid-template-columns:minmax(155px,30%) minmax(0,1fr)!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  grid-template-areas:"photo title" "photo description"!important;
  overflow:hidden!important;
  background:#fff!important;
  border-radius:20px!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-media{
  grid-area:photo!important;
  min-width:0!important;
  min-height:0!important;
  padding:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#f1f7fa!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:125px!important;
  max-height:230px!important;
  object-fit:contain!important;
  border-radius:13px!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-head{
  grid-area:title!important;
  align-self:start!important;
  display:flex!important;
  justify-content:flex-start!important;
  gap:10px!important;
  min-width:0!important;
  padding:17px 20px 7px!important;
  border:0!important;
  background:transparent!important;
  color:#103c57!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-head h3{
  margin:0!important;font-size:clamp(17px,1.4vw,21px)!important;line-height:1.3!important;
  overflow-wrap:anywhere!important;color:#113e59!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-head .icon{
  flex:0 0 auto!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body{
  grid-area:description!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  min-width:0!important;
  width:auto!important;
  padding:4px 20px 19px!important;
  margin:0!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body p,
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body li{
  font-size:15px!important;line-height:1.65!important;color:#31546b!important;
  margin:0 0 8px!important;overflow-wrap:anywhere!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body :is(ul,ol){
  padding-left:22px!important;margin:0!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body .inline-link{
  display:inline-block!important;align-self:flex-start!important;position:static!important;
  margin-top:auto!important;padding-top:12px!important;font-size:15px!important;
  color:#0078a3!important;font-weight:750!important;
}

/* Cards without photos are still HORIZONTAL: left title, right actual content.
   In particular geographic facts are not paired with an unrelated stock image. */
body.atlas-v321-canonical #intro .free-card.atlas322-no-media{
  grid-template-columns:minmax(150px,30%) minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  grid-template-areas:"title description"!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-no-media .card-head{
  align-self:stretch!important;padding:20px 12px 20px 18px!important;
  border-right:1px solid #d9e7ed!important;background:#f3f8fb!important;
}
body.atlas-v321-canonical #intro .free-card.atlas322-no-media .card-body{
  padding:18px 20px!important;
}

/* The quick-table's nonduplicated facts, if any, are visible in the
   scientific details column rather than in another FREE card. */
body.atlas-v321-canonical .atlas322-extra{
  border-top:1px solid #d1e3e8!important;margin-top:12px!important;padding-top:16px!important;
}
body.atlas-v321-canonical .atlas322-extra-facts{
  display:grid!important;grid-template-columns:40% minmax(0,60%)!important;
}

/* Tablet: photo hero remains bounded, but text/stats are allowed their true height. */
@media(min-width:801px) and (max-width:1220px){
 body.atlas-v321-canonical .invert-hero .hero-top{height:auto!important;max-height:none!important}
 body.atlas-v321-canonical .invert-hero .hero-media-panel{
   height:350px!important;min-height:350px!important;max-height:350px!important;
   box-sizing:border-box!important;overflow:hidden!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel .invert-photo-open{
   height:calc(100% - 29px)!important;min-height:0!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel .invert-photo-open img{
   min-height:0!important;height:100%!important;object-fit:contain!important;
 }
}

/* Mobile stays horizontal, using scaled media and generous wrapped text. */
@media(max-width:800px){
 body.atlas-v321-canonical .invert-hero .hero-top{height:auto!important;max-height:none!important}
 body.atlas-v321-canonical .invert-hero .hero-media-panel{
   height:310px!important;min-height:310px!important;max-height:310px!important;
   overflow:hidden!important;box-sizing:border-box!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel .invert-photo-open{
   min-height:0!important;height:calc(100% - 29px)!important;max-height:none!important;
 }
 body.atlas-v321-canonical .invert-hero .hero-media-panel .invert-photo-open img{
   min-height:0!important;height:100%!important;max-height:100%!important;object-fit:contain!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal,
 body.atlas-v321-canonical #intro .free-card.atlas322-no-media{
   grid-template-columns:minmax(90px,33%) minmax(0,1fr)!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-head{
   padding:12px 11px 7px!important;flex-wrap:wrap!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-head h3{
   font-size:16px!important;line-height:1.35!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body{
   padding:4px 11px 14px!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body p,
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-body li{
   font-size:14px!important;line-height:1.54!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-media{
   padding:8px!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-horizontal .card-media img{
   width:100%!important;height:auto!important;min-height:0!important;max-height:230px!important;
 }
 body.atlas-v321-canonical #intro .free-card.atlas322-no-media .card-head{
   padding:13px 8px!important;
 }
}