/* ---------------------------------------------------------
   0) Defaults + CMS mapping (one place)
   --------------------------------------------------------- */
.exp-article{
  /* CMS raw values (may be empty) */

  /* Final tokens with safe fallbacks */
  --exp-chip:   var(--cms-chip,   #aec5c1);
  --exp-banner: var(--cms-banner, #7398a1);
  --exp-title:  var(--cms-title,  #ebdbcd);
}

/* (Optional) Typed props for browsers that support @property.
   Keeps the same defaults, but you still get the fallbacks above
   if @property isn’t supported. */
@property --exp-chip   { syntax: '<color>'; inherits: true; initial-value: #aec5c1; }
@property --exp-banner { syntax: '<color>'; inherits: true; initial-value: #7398a1; }
@property --exp-title  { syntax: '<color>'; inherits: true; initial-value: #ebdbcd; }

/* ---------------------------------------------------------
   1) Consumers
   --------------------------------------------------------- */
.exp-article .exp-chip{
  background-color: var(--exp-chip) !important;
  color: #fff !important;
}

.exp-article .exp-hero-inner{
  background-color: var(--exp-banner) !important;
  background-image: none !important;
}

.exp-article .exp-title,
.exp-article .exp-hero-inner h1,
.exp-article h1.exp-title,
.exp-article h1{
  color: var(--exp-title) !important;
}
.exp-article h1 a { color: inherit !important; }

/* ---------------------------------------------------------
   2) Article image block
   --------------------------------------------------------- */
.exp-col-media{
  width: 100%;
  max-width: 560px;      /* desktop cap; tweak to taste */
  margin-inline: auto;   /* centers the block */
}

/* The wrapper can be either a Div or a WF Image element */
.exp-article-img{
  display: block;
  width: 100%;
}

.exp-article-img img{
  display: block;
  width: 100%;
  height: auto;          /* no fixed height → whole photo shows */
  object-fit: contain;   /* never crop on small viewports         */
  /* Optional: keep a pleasant placeholder shape while loading */
  /* aspect-ratio: 4 / 3; */
}

/* Mobile spacing parity (390 should match 480) */
@media (max-width: 480px){
  .exp-article-img{ margin-top: 16px; }
  .exp-col-media { padding-inline: 0; }  /* avoid accidental inner gutters */
}
@media (min-width: 992px){
  .exp-col-media{ max-width: 720px; }   /* or 46vw */
}
@media (min-width: 1280px){
  .exp-col-media{ max-width: 880px; }
}
@media (min-width: 1536px){
  .exp-col-media{ max-width: 1024px; }