/* components/card/card.css — Card (doc, Componentes > Card). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Alias: valor por defecto; un Tema lo cambia en ms.theme */
  :root {
    --ms-cardRadius: var(--ms-radiusRole_container);
    --_ms-cardMediaWidth: var(--ms-spacing_160);
  }

  /* Card (doc, Componentes > Card): zonas, enlaces y Disposiciones. La Card no
     tematiza su contenido: solo su radio. Las zonas se ven en el orden del HTML. */
  .ms-card {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-inline-size: 0;
    overflow: hidden;
    padding-block: var(--ms-spacingRole_cell);
    border-radius: var(--ms-cardRadius);
    background: var(--ms-color_canvas);
    color: var(--ms-color_content);
  }
  .ms-card > [data-ms-card-zone] { box-sizing: border-box; min-inline-size: 0; }
  :where(.ms-card > [data-ms-card-zone]) > * { margin: 0; }
  /* Relleno y separación de partida de cada zona, sin especificidad: los atributos de
     Relleno y data-ms-gap le ganan */
  :where(.ms-card) > :where([data-ms-card-zone="marks"], [data-ms-card-zone="content"], [data-ms-card-zone="actions"]) { padding: var(--ms-spacingRole_cell) var(--ms-spacingRole_container); gap: var(--ms-spacingRole_part); }
  :where(.ms-card [data-ms-card-zone="overlay"]) { padding: var(--ms-spacingRole_container); gap: var(--ms-spacingRole_part); }
  /* media: al ras; si es la primera o la última zona del flujo, hasta el borde */
  /* media: la imagen misma, o un contenedor con la imagen adentro (con su propio relleno,
     radio o sombra, elegidos en el HTML) */
  .ms-card > [data-ms-card-zone="media"], .ms-card > [data-ms-card-zone="media"] > :is(img, video) { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); object-fit: cover; }
  .ms-card > [data-ms-card-zone="media"] { border-radius: 0; }
  .ms-card > [data-ms-card-zone="media"]:not(img, video) { aspect-ratio: auto; }
  .ms-card > [data-ms-card-zone="media"]:first-child,
  .ms-card > [data-ms-card-zone="overlay"]:first-child + [data-ms-card-zone="media"] { margin-block-start: calc(-1 * var(--ms-spacingRole_cell)); }
  .ms-card > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
  .ms-card > :is([data-ms-card-zone="marks"], [data-ms-card-zone="actions"]) { display: flex; flex-wrap: wrap; align-items: center; }
  .ms-card > [data-ms-card-zone="content"] { display: flex; flex-direction: column; flex: 1 1 auto; }
  /* actions: siempre por encima del enlace estirado */
  .ms-card > [data-ms-card-zone="actions"] { position: relative; z-index: 2; }
  /* overlay: encima de la Card; aparece con el cursor o el foco */
  .ms-card [data-ms-card-zone="overlay"] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--ms-color_canvas);
    color: var(--ms-color_content);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), visibility 0s linear var(--ms-motionDuration_fast);
  }
  @media (hover: hover) {
    .ms-card:is(:hover, :focus-within) [data-ms-card-zone="overlay"] { opacity: 1; visibility: visible; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), visibility 0s; }
  }
  /* Sin cursor (doc, Interactions > Pantallas sin cursor): visible, en su lugar del HTML */
  @media (hover: none) {
    .ms-card [data-ms-card-zone="overlay"] { position: static; opacity: 1; visibility: visible; transition: none; }
  }
  @media (prefers-reduced-motion: reduce) { .ms-card [data-ms-card-zone="overlay"] { transition: none; } }
  /* overlay dentro de una zona: cubre esa zona */
  .ms-card > [data-ms-card-zone]:has(> [data-ms-card-zone="overlay"]) { position: relative; }

  /* Enlaces: un solo enlace por destino, estirado sobre la Card o sobre su zona */
  .ms-card [data-ms-card-link] { color: inherit; text-decoration: none; }
  .ms-card [data-ms-card-link]::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .ms-card > [data-ms-card-zone]:has([data-ms-card-link="zone"]) { position: relative; }
  /* Sobre imagen, las zonas no se posicionan: el enlace de la Card cubre toda la Card */
  .ms-card[data-ms-contrast^="image"] > [data-ms-card-zone]:not(:has([data-ms-card-link="zone"]), [data-ms-card-zone="media"], [data-ms-card-zone="actions"], [data-ms-card-zone="overlay"]) { position: static; }
  .ms-card [data-ms-card-link]:focus-visible { outline: none; }
  .ms-card:has([data-ms-card-link="card"]:focus-visible) { outline: var(--ms-focusRingWidth) solid var(--ms-color_focus); outline-offset: var(--ms-focusRingOffset); }
  .ms-card > [data-ms-card-zone]:has([data-ms-card-link="zone"]:focus-visible) { outline: var(--ms-focusRingWidth) solid var(--ms-color_focus); outline-offset: calc(-1 * var(--ms-focusRingWidth)); }
  /* Lo que se toca adentro queda por encima del área del enlace; una zona con
     data-ms-card-link="none", también */
  .ms-card :is(a:not([data-ms-card-link]), button, input, select, textarea, label, summary) { position: relative; z-index: 2; }
  .ms-card > [data-ms-card-zone][data-ms-card-link="none"] { position: relative; z-index: 2; }

  /* Disposición horizontal: media al inicio, cuadrada, de todo el alto; las demás
     zonas, apiladas al lado. La última fila toma el alto que sobra. */
  .ms-card[data-ms-layout="horizontal"] { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat(8, auto) 1fr; }
  .ms-card[data-ms-layout="horizontal"] > [data-ms-card-zone] { grid-column: 2; }
  /* La columna de media toma el ancho de la zona: cardMediaWidth, cuadrada y de todo el alto, o el de data-ms-width */
  .ms-card[data-ms-layout="horizontal"] > [data-ms-card-zone="media"] { grid-column: 1; grid-row: 1 / -1; inline-size: var(--_ms-cardMediaWidth); block-size: 100%; aspect-ratio: auto; margin-block: calc(-1 * var(--ms-spacingRole_cell)); }
  .ms-card[data-ms-layout="horizontal"] > [data-ms-card-zone="media"]:not([data-ms-width], [data-ms-height]) { min-block-size: var(--_ms-cardMediaWidth); }
  .ms-card[data-ms-layout="horizontal"] > [data-ms-card-zone="media"][data-ms-height] { align-self: start; margin-block-end: 0; }
  .ms-card[data-ms-layout="horizontal"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: 100%; aspect-ratio: auto; }
  .ms-card[data-ms-layout="horizontal"] > [data-ms-card-zone="overlay"] { grid-column: 1 / -1; }
  /* Adaptación de la Card horizontal (doc, Componentes > Card): la Card se mide a sí
     misma y, por debajo de su ancho mínimo (data-ms-min-width), apila sus zonas en el
     orden del HTML. Una container query no cambia al elemento que mide: cambian las
     zonas, que ocupan todo el ancho. La condición repite el valor de cada Token. */
  .ms-card[data-ms-layout="horizontal"][data-ms-min-width] { container: ms-card / inline-size; }
  @container ms-card (width < 8rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="128"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="128"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="128"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="128"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 10rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="160"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="160"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="160"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="160"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 12rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="192"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="192"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="192"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="192"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 14rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="224"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="224"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="224"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="224"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 16rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="256"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="256"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="256"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="256"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 20rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="320"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="320"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="320"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="320"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 24rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="384"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="384"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="384"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="384"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 28rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="448"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="448"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="448"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="448"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 32rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="512"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="512"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="512"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="512"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 37.5rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="600"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="600"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="600"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="600"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 40rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="640"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="640"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="640"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="640"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 48rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="768"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="768"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="768"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="768"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 50rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="800"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="800"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="800"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="800"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 60rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="960"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="960"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="960"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="960"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  @container ms-card (width < 64rem) {
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="1024"] > [data-ms-card-zone] { grid-column: 1 / -1; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="1024"] > [data-ms-card-zone="media"] { grid-row: auto; block-size: auto; min-block-size: 0; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); margin-block-end: 0; }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="1024"] > [data-ms-card-zone="media"]:not(:has(~ [data-ms-card-zone]:not([data-ms-card-zone="overlay"]))) { margin-block-end: calc(-1 * var(--ms-spacingRole_cell)); }
    .ms-card[data-ms-layout="horizontal"][data-ms-min-width="1024"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: auto; aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_16x9)); }
  }
  /* Disposición overlay: media de fondo; la Card toma su proporción de data-ms-ratio.
     Las zonas antes de content quedan arriba; content y las que lo siguen, abajo. El
     contraste del texto lo da data-ms-contrast="imageDark" o "imageLight" en la Card. */
  .ms-card[data-ms-layout="overlay"] { aspect-ratio: var(--_ms-ratio, var(--ms-shapeAspectRatio_3x4)); justify-content: flex-end; }
  .ms-card[data-ms-layout="overlay"] > [data-ms-card-zone="media"] { position: absolute; inset: 0; z-index: -1; block-size: 100%; aspect-ratio: auto; margin: 0; }
  .ms-card[data-ms-layout="overlay"] > [data-ms-card-zone="media"] > :is(img, video) { block-size: 100%; aspect-ratio: auto; }
  .ms-card[data-ms-layout="overlay"] > [data-ms-card-zone="content"] { flex: 0 0 auto; margin-block-start: auto; }
}