:root{
    --tcs-font:"Monda",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,ui-sans-serif;
    --bg:#f6f7f9;           /* page background */
    --card:#fff;            /* card surface */
    --ink:#14171b;
    --muted:#6f7680;
    --hair:#e9edf2;         /* hairline borders */
    --border:#e3e7ee;
    --radius:14px;
    --radius-img:14px;

    --gap:16px;             
    --text-size:12.5px;     /* smaller, cleaner */
    --title-weight:500;     /* lighter title weight */
    --body-weight:450;      /* subtle body weight */
  }

  /* Page background: soft vignette so cards “float” */
  .tcs-gallery{
    width:100%;
    margin:0 auto;
    padding:clamp(10px,2vw,20px);
    background:
      radial-gradient(1200px 600px at 50% -200px, #ffffff 0%, rgba(255,255,255,.9) 50%, rgba(246,247,249,1) 100%),
      var(--bg);
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:var(--gap);
    box-sizing:border-box;
    font-family:var(--tcs-font);
    color:var(--ink);
    letter-spacing:.002em;
  }

  /* Default responsive steps (kept) */
  @media (max-width:1500px){ .tcs-gallery{ grid-template-columns:repeat(5,1fr);} }
  @media (max-width:1180px){ .tcs-gallery{ grid-template-columns:repeat(4,1fr);} }
  @media (max-width:920px) { .tcs-gallery{ grid-template-columns:repeat(3,1fr);} }
  @media (max-width:660px) { .tcs-gallery{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:400px) { .tcs-gallery{ grid-template-columns:1fr;} }

  /* Device-tuned refinements (additive, placed AFTER the defaults) */
  @media (max-width:1060px){ .tcs-gallery{ grid-template-columns:repeat(3,1fr);} }  /* iPad Pro portrait */
  @media (max-width:820px){ .tcs-gallery{ grid-template-columns:repeat(2,1fr);} }   /* iPad mini portrait */
  @media (max-width:780px){ .tcs-gallery{ grid-template-columns:repeat(2,1fr);} }   /* narrow tablets landscape */

  /* Fix squished cards on smaller phones */
  @media (max-width: 720px) and (orientation: portrait) {
    .tcs-gallery { grid-template-columns: 1fr; }
  }
  /* Hard stop to 1-up layout on narrow screens (covers 375–560px widths) */
  @media (max-width: 560px) {
    .tcs-gallery { grid-template-columns: 1fr; }
  }

  /* Card: gentle lift + soft backdrop shadow */
  .tcs-card{
    background:linear-gradient(180deg, var(--card), #fcfdff);
    border:1px solid var(--hair);
    border-radius:var(--radius);
    box-shadow:
      0 10px 24px rgba(16,24,40,.06),
      0 1px 0 rgba(16,24,40,.03) inset;
    overflow:hidden;
    display:flex; flex-direction:column; min-height:100%;
    transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .tcs-card:hover{
    transform:translateY(-2px);
    box-shadow:
      0 14px 32px rgba(16,24,40,.10),
      0 1px 0 rgba(16,24,40,.04) inset;
    border-color:#dfe5ec;
  }

  /* Media stage (center its child content) */
  .tcs-media{
    display:block;
    position:relative;
    background:#fff;
    padding:0;
    text-align:center;            /* center inline/inline-block children */
  }

  /* Image well (keeps your exact visuals, now centers as inline-flex) */
  .image-container{
    position:relative;
    width:299px;
    height:299px;
    margin:0 auto;
    background:#fff;
    border:0px solid var(--border);
    border-radius:var(--radius-img);
    overflow:hidden;
    display:inline-flex;          /* inline-flex so text-align works */
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    transition:border-color .18s ease, box-shadow .18s ease, transform .12s ease;
    vertical-align:top;
  }
  .tcs-card:hover .image-container{
    border-color:#d6dbe3;
    box-shadow:0 6px 16px rgba(16,24,40,.06);
  }
  .image-container::before{
    content:""; position:absolute; inset:0; border-radius:inherit;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.03);
    pointer-events:none;
  }

  /* IMPORTANT: natural size, capped to the 299×299 well — prevents split/stretch */
  .tcs-media .tcs-img,
  .tcs-media .lazy-image{
    display:block;
    width:auto;                 /* don't force 100% */
    height:auto;                /* don't force 100% */
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    background:#fff;
    opacity:0;
    transition:opacity .28s ease;
  }
  /* Eager/LCP image shows immediately (no fade) */
  .tcs-media .tcs-img{ opacity:1; transition:none; }
  /* Safety override vs global img rules */
  .tcs-media img{ width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; }

  /* Body + Title: same size, lighter weights */
  .tcs-body{
    padding:10px 12px 12px; text-align:center;
    font-size:var(--text-size); line-height:1.35; font-weight:var(--body-weight);
  }
  .tcs-title{
    margin:0 0 6px;
    font:var(--title-weight) var(--text-size)/1.25 var(--tcs-font);
    color:#0f1318;
  }
  .tcs-title .tcs-mute{ color:#000; font-weight:500; } /* you had var(--muted); kept tone similar */

  /* Links / actions: compact + understated */
  .tcs-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; margin-top:4px; }
  .tcs-body a{
    color:#1a212b; text-decoration:none;
    background-image:linear-gradient(currentColor,currentColor);
    background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
    transition:background-size .22s ease, color .18s ease, opacity .18s ease;
    opacity:.92;
  }
  .tcs-body a:hover{ color:#0b1222; background-size:100% 1px; opacity:1; }

  /* Optional pill button style if used */
  .raised-button{
    padding:.42rem .76rem; font-size:12px; font-weight:600; border-radius:9999px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }

  /* Visibility class used by the JS */
  .lazy-image.is-visible,
  .lazy-image.loaded{ opacity:1; }
  /* --- Stabilize the badge row so it never pushes content (CLS fix) --- */
.tcs-actions{
  min-height: 90px;          /* reserve space for 1 row of badges */
}

/* Normalize any badge/icon images inside the actions row */
.tcs-actions img{
  display:inline-block;
  vertical-align:middle;
  max-height:76px;           /* matches your tallest (e.g., 63×76) */
  height:auto;
  width:auto;                 /* respect intrinsic width */
}

/* If a specific badge must keep exact size, keep your width/height attrs;
   the rule above won’t change those since they’re explicit on the tag. */