/* ============================================================================
   The Two Do List — Carte de collection (« carte à jouer »)
   Implémentation autonome, sans dépendance. À enqueue par le plugin.

   Principe :
   - Photo d'illustration en fond (cover, toujours centrée).
   - Cadre blanc tout autour (l'objet « carte »).
   - Index « valeur + symbole » intégré au bord, sur fond blanc, dans deux
     coins opposés (haut-gauche + bas-droite pivoté). Variante : bas-droite seul.
   - Couleur de l'index : dégradé NOIR pour ♠ ♣, dégradé ROUGE pour ♥ ♦.
   - Thème centré (Newsreader italic) + eyebrow (Inter, capitales).

   Tout est dimensionné en unités de conteneur (cqmin) : la carte « tombe bien »
   quelle que soit sa taille ET son ratio (paysage, carré, portrait), sans JS.
   Prérequis : la carte doit avoir une taille définie (hauteur fixe OU
   aspect-ratio sur la cellule). C'est le cas dans une grille bento.
   ========================================================================== */

.ttdl-card {
  --frame: clamp(7px, 2.6cqmin, 16px);     /* marge blanche                 */
  --frame-r: clamp(12px, 4.6cqmin, 26px);  /* rayon extérieur de la carte   */
  --inner-r: clamp(8px, 3.2cqmin, 18px);   /* rayon de la photo             */
  --tab-r: clamp(13px, 5.2cqmin, 30px);    /* rayon intérieur de l'index    */
  --grad-black: linear-gradient(150deg, #4a5154 0%, #23282b 50%, #0c0e10 100%);
  --grad-red:   linear-gradient(150deg, #f0627a 0%, #d12340 50%, #9e0f2a 100%);
  --idx-grad: var(--grad-black);

  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;                 /* hauteur imposée par la cellule (bento)   */
  background: #ffffff;
  border-radius: var(--frame-r);
  padding: var(--frame);
  box-shadow: 0 18px 42px -22px rgba(47, 51, 52, 0.5);
  container-type: size;         /* active les unités cqmin/cqw/cqh          */
  text-decoration: none;
  overflow: hidden;             /* clippe l'index au rayon de la carte      */
}

/* Mode « ratio fixe » : pose un aspect-ratio sur la carte au lieu d'une
   hauteur de cellule. Surcharge .ttdl-card[style="--ar:..."] si besoin. */
.ttdl-card.is-ratio { height: auto; aspect-ratio: var(--ar, 3 / 2); }

/* Couleur de l'index selon la famille (rouge pour cœur / carreau) */
.ttdl-card.is-red { --idx-grad: var(--grad-red); }

/* ---- Photo + voile + texte centré ---------------------------------------- */
/* Positionnée en ABSOLU dans le cadre (inset = marge blanche) plutôt qu'en
   width/height 100 % : sur WebKit (Safari/Chrome iOS), height:100 % se résout
   mal dans une carte dimensionnée par aspect-ratio + container-type:size —
   la photo débordait sur le cadre blanc du bas (coins « cassés »). */
.ttdl-card__media {
  position: absolute;
  inset: var(--frame);
  border-radius: var(--inner-r);
  overflow: hidden;
  background-color: #cfcac2;       /* fallback si l'image manque            */
  background-image: var(--card-img, none);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ttdl-card__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 62% at 50% 50%,
              rgba(15, 18, 20, 0.34), rgba(15, 18, 20, 0.04) 72%);
}
.ttdl-card__text {
  position: relative;
  z-index: 2;
  padding: 0 14%;
  max-width: 100%;
}
.ttdl-card__eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(8px, 2.4cqmin, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 clamp(4px, 1.6cqmin, 12px);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.ttdl-card__theme {
  display: block;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 9cqmin, 60px);
  line-height: 1.02;
  color: #ffffff;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

/* ---- Index : valeur + symbole, intégré au bord --------------------------- */
/* Taille FIXE quelle que soit la dimension de la carte : l'estampille reste
   identique d'une carte à l'autre pour la continuité visuelle. Seul le rayon
   du coin EXTERNE suit le cadre (var(--frame-r)) pour rester affleurant. */
.ttdl-card__index {
  position: absolute;
  z-index: 3;
  background: #ffffff;
  padding: 8px 12px;         /* base (gauche/droite symétrique → contenu centré
                                entre le bord intérieur de la carte et le bord de l'index) */
  display: flex;             /* le wrapper interne porte la rotation        */
}
.ttdl-card__index-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Index niché dans le coin de la PHOTO (en retrait de l'arrondi extérieur de la
   carte). Bords haut + côté droits, alignés au cadre blanc (intégrés au contour) ;
   seul le coin INTÉRIEUR (vers la photo) est arrondi.
   Marge basse renforcée (13px) ; miroir sur l'index bas-droite via padding-top
   (son contenu est pivoté à 180°) pour que les deux estampilles soient identiques. */
.ttdl-card__index--tl {
  top: var(--frame);
  left: var(--frame);
  padding-bottom: 18px;
  border-bottom-right-radius: 15px;
}
.ttdl-card__index--br {
  bottom: var(--frame);
  right: var(--frame);
  padding-top: 18px;
  border-top-left-radius: 15px;
}
.ttdl-card__index--br .ttdl-card__index-inner { transform: rotate(180deg); }

/* Variante : un seul index, en bas à droite */
.ttdl-card.is-index-br .ttdl-card__index--tl { display: none; }

.ttdl-card__value,
.ttdl-card__suit {
  display: block;
  line-height: 1;
  background-image: var(--idx-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ttdl-card__value {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 20px;           /* fixe — continuité entre cartes              */
}
.ttdl-card__suit {
  font-weight: 700;
  font-size: 15px;           /* fixe — continuité entre cartes              */
  margin-top: 0;
}