/* MAYCARES — Cobertura content hub (Product Enhancement Pass).
   Loaded alongside /maycares-explore.css and /maycares-pages.css. */

.cv-filters{
  margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;
}

.cv-grid{
  margin-top:20px;display:grid;gap:22px 16px;grid-template-columns:minmax(0,1fr);
}
@media (min-width:640px){.cv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}}
@media (min-width:1024px){.cv-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}}

.cv-card{min-width:0}
.cv-card > a{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.cv-card > a:hover .cv-media{box-shadow:var(--shadow-hover)}
.cv-media{
  position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);background:var(--placeholder);transition:box-shadow .25s ease;
}
.cv-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* Per-media focal point (Admin "Punto de enfoque"); 50% when unset. */
  object-position:50% var(--cv-focus-pct,50%);
}
.cv-media-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(29,71,107,.55);
}
.cv-play{
  position:absolute;left:12px;bottom:12px;width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--navy);font-size:12px;
}
.cv-body{display:block;padding:12px 2px 0}
.cv-kicker{
  display:block;font-size:11px;font-weight:var(--fw-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-gray);
}
.cv-title{
  display:block;margin-top:6px;font-size:16px;font-weight:var(--fw-title);
  line-height:1.35;color:var(--text);
}
.cv-tags{
  margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;padding:0 2px;
  font-size:12px;color:var(--blue-gray);
}

/* ===== Featured module (Miss Universe hub) ===== */
.cv-feature{margin-top:18px;display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cv-feature{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}}
.cv-feature-main{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.cv-feature-main:hover .cv-media{box-shadow:var(--shadow-hover)}
.cv-title-lg{font-size:19px;line-height:1.3}
.cv-feature-side{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:560px) and (max-width:899px){.cv-feature-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:900px){.cv-feature-side{gap:16px;align-content:start}}
.cv-feature-side a{display:flex;gap:12px;text-decoration:none;color:inherit;align-items:flex-start}
.cv-side-thumb{
  position:relative;flex:0 0 108px;width:108px;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);background:var(--placeholder);
}
.cv-side-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv-side-body{min-width:0;display:block}
.cv-side-title{display:block;margin-top:4px;font-size:14px;font-weight:var(--fw-title);line-height:1.35;color:var(--text)}

/* Coverage module CTA is always centered within the full module. */
.cv-cta{justify-content:center;width:100%}

/* ===== Platform switcher (YouTube / Instagram) ===== */
.cv-switch{
  margin:22px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;
}

/* Instagram cards: square media, caption preview, subtle content-type badge. */
.cv-media-square{aspect-ratio:1/1}
.cv-caption{
  display:block;margin-top:6px;font-size:14px;font-weight:var(--fw-body);
  line-height:var(--lh-body);color:var(--text);
}
.cv-kind{
  position:absolute;right:10px;top:10px;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--navy);
  font-size:11px;font-weight:var(--fw-micro);letter-spacing:.06em;text-transform:uppercase;
}

/* ===== Mobile/tablet peer-choice rails =====
   The platform switch and the topic filters are peer options, so below the
   desktop breakpoint they reuse the shared .chip-rail behaviour (one row,
   swipeable, hidden scrollbar). Desktop keeps the approved centered wrap. */
.cv-switch.chip-rail,
.cv-filters.chip-rail{
  flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
}
/* Only two platform options: they always fit, so centre them at every width. */
.cv-switch.chip-rail{margin:22px 0 0;justify-content:center}

@media (min-width:1024px){
  .cv-switch.chip-rail{flex-wrap:wrap;overflow:visible;justify-content:center;margin:22px auto 0}
  .cv-filters.chip-rail{flex-wrap:wrap;overflow:visible}
}

/* ===== Actividades — MAYCARES exclusive photo albums =====
   Reuses the existing card/media grammar; only the album grouping, the 4:3
   media container and the gallery grid are new. Fixed aspect containers keep
   layout shift at zero while signed URLs resolve. */
.cv-media-43{aspect-ratio:4/3}
.cv-day{margin-top:22px}
.cv-day-title{
  margin:0 0 12px;font-size:13px;font-weight:var(--fw-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue-gray);
}
.cv-day-title a{color:var(--navy)}

.cv-gallery{
  margin-top:16px;display:grid;gap:18px 14px;grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){.cv-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}}
@media (min-width:1200px){.cv-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cv-shot{margin:0;min-width:0}
.cv-shot figcaption{display:block;padding:8px 2px 0}
.cv-credit{display:block;margin-top:4px;font-size:11px;color:var(--blue-gray)}

/* Candidate profile: compact 2-up / 3-up strip of tagged photos. */
.cv-shots{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.cv-shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}

/* Tablet: fewer, larger cards and a stacked feature keep imagery and copy
   useful. Desktop density resumes unchanged at 1200px. */
@media (min-width:768px) and (max-width:1199px){
  .cv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .cv-feature{grid-template-columns:minmax(0,1fr);gap:22px}
  .cv-feature-side{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .cv-feature-side a{gap:14px}
  .cv-side-thumb{flex-basis:132px;width:132px}
  .cv-side-title{font-size:15px}
  .cv-title-lg{font-size:21px}
  .cv-body{padding-top:14px}
}
@media (min-width:768px) and (max-width:899px){
  .cv-gallery,.cv-shots{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
}

/* Three peer options still fit on the narrowest supported width. */
@media (max-width:400px){.cv-switch.chip-rail{gap:8px}}

/* ===== External media tiles never look blank =====
   Instagram exposes no derivable thumbnail, so an item without an uploaded
   cover falls back to a calm branded wash instead of an empty placeholder. */
.cv-media-brand{
  background:linear-gradient(140deg,rgba(29,71,107,.10),rgba(232,118,143,.16));
  color:rgba(29,71,107,.75);font-weight:var(--fw-micro);
}

/* Instagram lazy preview — one shared surface (Coverage, Activity, Admin). */
.cv-ig{position:absolute;inset:0;display:block;overflow:hidden;background:var(--placeholder)}
/* Media-first compact crop: the official embed renders media above the
   caption/comments area. We cannot style the cross-origin internals, so the
   OUTER frame is positioned inside the card's fixed-aspect viewport using a
   per-media focal value (0 = top, .5 = centered, 1 = lower). `--cv-focus`
   comes from `coverage_media.preview_focus_y`; unset media keeps one stable
   media-first default. Width follows the card (never below Instagram's
   ~326px minimum, centered) so framing stays responsive. The full viewer is
   a separate component and is intentionally NOT cropped. */
.cv-ig-frame{
  position:absolute;left:50%;top:calc((100% - 640px) * var(--cv-focus,.18));
  width:max(340px,100%);height:640px;border:0;
  transform:translateX(-50%);pointer-events:none;
}
.cv-extlabel{
  position:absolute;right:8px;top:8px;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--navy);font-size:11px;letter-spacing:.06em;
}

/* Activities directory cards — reuses cv-grid/cv-card language. */
.act-grid{margin-top:22px}
.act-card-link{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;border-radius:14px}
.act-card-link:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.act-card-media{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--placeholder)}
.act-cta{
  display:inline-block;margin-top:10px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--navy);color:var(--navy);font-weight:600;font-size:14px;
}
.act-cta-open{background:var(--navy);color:#fff}

/* ===== Shared micro-preview (uploaded video + YouTube), compact tiles only.
   Lazy: only mounted while the tile is on screen, muted and short-lived.
   Instagram cannot autoplay in its official embed, so it keeps the poster /
   branded fallback — never a broken or ugly state. ===== */
.cv-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% var(--cv-focus-pct,50%);background:var(--placeholder);
}
.cv-ytpreview{
  position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;
}

/* Secondary source link under an external album item. The content itself is
   consumed inside MAYCARES; this is only for whoever wants the original. */
.cv-shot figcaption .cv-origin {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}