/* ═══════════════════════════════════════════════════════════════════════════
   CulturadeCLUB — components.css
   Cards, singles, aside boxes, relations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CARD BASE ───────────────────────────────────────────────────────────── */
.cc-card {
  background: #fff;
  border: 1px solid #e2ddd4;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease;
}
.cc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.13);
}

/* Card media */
.cc-card__media-link { position: relative; display: block; overflow: hidden; }
.cc-card__img {
  width: 100%; height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.cc-card:hover .cc-card__img { transform: scale(1.03); }
.cc-card__img--placeholder {
  width: 100%; height: 180px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-size: 20px; letter-spacing: 3px;
  color: rgba(255,255,255,.5);
  overflow: hidden;
  transition: transform .4s ease;
}
.cc-card:hover .cc-card__img--placeholder { transform: scale(1.03); }
.cc-card__img--portrait { height: 240px; }
.cc-card__media-link--portrait .cc-card__img--placeholder { height: 240px; }

.cc-card__genre-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  background: rgba(12,12,10,.75);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
}

/* Card body */
.cc-card__body { padding: 14px 16px; flex: 1; }
.cc-card__eyebrow {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
}
.cc-card__country { font-size: 11px; color: var(--cc-light); }
.cc-card__sep     { color: var(--cc-pale); font-size: 10px; }
.cc-card__genre-link {
  font-size: 11px; font-weight: 700;
  color: var(--cc-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: opacity .15s;
}
.cc-card__genre-link:hover { opacity: .75; }

.cc-card__title {
  font-family: var(--ff-display);
  font-size: 22px;
  letter-spacing: 1px;
  line-height: 1.05;
  margin-bottom: 8px;
}
.cc-card__title a { color: var(--cc-black); transition: color .15s; }
.cc-card__title a:hover { color: var(--cc-accent); }
.cc-card__title--center { text-align: center; }

.cc-card__date {
  font-size: 13px; color: var(--cc-mid);
  display: flex; align-items: center; gap: 6px;
}
.cc-card__date-small { font-size: 12px; color: var(--cc-light); }
.cc-card__excerpt    { font-size: 13px; color: var(--cc-mid); line-height: 1.5; margin-top: 6px; }
.cc-card__origin     { font-size: 13px; color: var(--cc-light); text-align: center; }

/* Card footer */
.cc-card__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--cc-cream);
  background: #faf8f4;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.cc-card__location {
  font-size: 12px; color: var(--cc-light);
  display: flex; align-items: center; gap: 5px;
  min-width: 0;
}
.cc-card__location svg { flex-shrink: 0; }
.cc-card__price { font-size: 12px; color: var(--cc-gold); font-weight: 700; white-space: nowrap; }
.cc-card__source { font-size: 11px; color: var(--cc-light); }
.cc-card__source a { color: var(--cc-accent); }
.cc-card__ext-links { display: flex; gap: 6px; }
.cc-card__ext-link {
  font-size: 10px; font-weight: 800;
  letter-spacing: .5px;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--cc-cream);
  color: var(--cc-mid);
  transition: all .15s;
  line-height: 1.4;
}
.cc-card__ext-link:hover,
.cc-card__ext-link--ig:hover { background: var(--cc-black); color: #fff; }
.cc-card__ext-link--sp:hover { background: #1db954; color: #fff; }

.cc-card__links { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }

/* Artist card specific */
.cc-card--artista .cc-card__body { text-align: center; }
.cc-card__placeholder-name { opacity: .6; }

/* Noticia featured */
.cc-card--noticia-featured .cc-card__img { height: 100%; min-height: 300px; }
.cc-card--noticia-featured .cc-card__title { font-size: 28px; }
.cc-card--noticia-featured .cc-card__excerpt { display: block; }
.cc-card--noticia:not(.cc-card--noticia-featured) .cc-card__excerpt { display: none; }
.cc-card--noticia:not(.cc-card--noticia-featured) .cc-card__img { height: 120px; }

/* ── SINGLE HERO ─────────────────────────────────────────────────────────── */
.cc-single-hero {
  margin-top: var(--cc-nav-h);
  position: relative;
  min-height: clamp(320px, 50vh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;      /* keeps image contained */
}
/* Post/noticia hero — reduce height so content starts higher on screen */
.cc-single-hero--post {
  min-height: clamp(260px, 38vh, 420px);
}
.cc-single-hero__media { position: absolute; inset: 0; }
.cc-single-hero__img   {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.cc-single-hero__img--placeholder {
  width: 100%; height: 100%;
}
.cc-single-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,10,.95) 0%, rgba(12,12,10,.5) 50%, rgba(12,12,10,.2) 100%);
}
.cc-single-hero--post .cc-single-hero__overlay {
  background: linear-gradient(to top, rgba(12,12,10,.88) 0%, rgba(12,12,10,.55) 60%, rgba(12,12,10,.2) 100%);
}
.cc-single-hero__content {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 var(--cc-gutter) var(--sp-xl);
}
.cc-single-hero__breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.45);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.cc-single-hero__breadcrumb a { transition: color .15s; }
.cc-single-hero__breadcrumb a:hover { color: var(--cc-white); }
.cc-single-hero__breadcrumb span:not(a) { opacity: .3; }
.cc-single-hero__meta    { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-single-hero__country { font-size: 13px; color: rgba(255,255,255,.5); }
.cc-single-hero__title {
  font-family: var(--ff-display);
  font-size: clamp(44px, 8vw, 96px);
  color: var(--cc-white);
  line-height: .9;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
/* Post hero title — smaller and more readable for long news headlines */
.cc-single-hero--post .cc-single-hero__title {
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: 1px;
}
.cc-single-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── SINGLE LAYOUT ───────────────────────────────────────────────────────── */
.cc-single-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-3xl);
  align-items: start;
}
.cc-single-main {}
.cc-single-section { margin-bottom: var(--sp-xl); }
.cc-single-section__title {
  font-family: var(--ff-display);
  font-size: 28px;
  letter-spacing: 1px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--cc-black);
  padding-bottom: 10px;
}
.cc-single-body p           { margin-bottom: 18px; line-height: 1.8; }
.cc-single-body h2          { font-family: var(--ff-display); font-size: 28px; letter-spacing: 1px; margin: 28px 0 12px; }
.cc-single-body h3          { font-size: 18px; font-weight: 700; margin: 20px 0 8px; }
.cc-single-body a           { color: var(--cc-accent); text-decoration: underline; text-underline-offset: 3px; }
.cc-single-body--post       { max-width: 720px; }
.cc-post-thumbnail          { margin-bottom: 28px; border-radius: var(--r-md); overflow: hidden; }
.cc-post-thumbnail img      { width: 100%; height: 400px; object-fit: cover; }
.cc-post-meta-top           { font-size: 13px; color: var(--cc-light); margin-bottom: 8px; }

/* Quick facts */
.cc-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e2ddd4;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-xl);
}
.cc-fact {
  padding: 18px 20px;
  border-right: 1px solid #e2ddd4;
  border-bottom: 1px solid #e2ddd4;
}
.cc-fact:nth-child(3n) { border-right: none; }
.cc-fact__label {
  font-size: 10px; color: var(--cc-light);
  text-transform: uppercase; letter-spacing: 1px;
  display: block; margin-bottom: 5px;
}
.cc-fact__val { font-size: 14px; font-weight: 600; color: var(--cc-black); }
.cc-fact__val a { color: var(--cc-accent); }

/* Artists strip */
.cc-artists-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.cc-artist-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--cc-cream);
  border: 1px solid #ddd8ce;
  border-radius: 99px;
  padding: 6px 14px 6px 6px;
  text-decoration: none;
  transition: all .15s;
}
.cc-artist-chip:hover { background: var(--cc-black); border-color: var(--cc-black); }
.cc-artist-chip:hover .cc-artist-chip__name { color: var(--cc-white); }
.cc-artist-chip__img {
  width: 32px; height: 32px;
  border-radius: 50%; object-fit: cover;
}
.cc-artist-chip__img--ph {
  width: 32px; height: 32px;
  border-radius: 50%;
}
.cc-artist-chip__name { font-size: 13px; font-weight: 600; color: var(--cc-black); }

/* Relations */
.cc-relations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cc-relation-card {
  display: flex; flex-direction: column;
  padding: 16px;
  border-radius: var(--r-md);
  border: 1px solid #e2ddd4;
  text-decoration: none;
  transition: all .15s;
}
.cc-relation-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.cc-relation-card--evento  { border-left: 3px solid var(--cc-accent); }
.cc-relation-card--artista { border-left: 3px solid #7b2d8b; }
.cc-relation-card--local   { border-left: 3px solid #2d6a9f; }
.cc-relation-card__type    { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--cc-light); margin-bottom: 5px; }
.cc-relation-card__title   { font-size: 14px; font-weight: 600; color: var(--cc-black); line-height: 1.3; }
.cc-relation-card__date    { font-size: 12px; color: var(--cc-light); margin-top: 4px; }

/* Aside boxes */
.cc-single-aside { }
.cc-aside-box {
  border: 1px solid #e2ddd4;
  border-radius: var(--r-md);
  padding: 20px;
  margin-bottom: 16px;
  background: #fff;
}
.cc-aside-box--cta {
  background: var(--cc-black);
  border-color: var(--cc-black);
}
.cc-aside-box__title {
  font-family: var(--ff-display);
  font-size: 18px; letter-spacing: .8px;
  margin-bottom: 14px;
  color: var(--cc-black);
}
.cc-aside-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--cc-cream);
  gap: 8px;
}
.cc-aside-row:last-child { border-bottom: none; }
.cc-aside-row__label { font-size: 11px; color: var(--cc-light); text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; }
.cc-aside-row__val   { font-size: 13px; font-weight: 500; color: var(--cc-black); text-align: right; }
.cc-aside-row__val a { color: var(--cc-accent); }

/* cc-aside-social — see main.css for full definition */
.cc-aside-social__link--spotify:hover { background: #1db954 !important; border-color: #1db954 !important; color:#fff !important; }
.cc-aside-social__link--ig:hover      { background: #e1306c !important; border-color: #e1306c !important; color:#fff !important; }
.cc-aside-social__link--yt:hover      { background: #ff0000 !important; border-color: #ff0000 !important; color:#fff !important; }

.cc-aside-related {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cc-cream);
  transition: opacity .15s;
}
.cc-aside-related:last-child  { border-bottom: none; }
.cc-aside-related:hover       { opacity: .75; }
.cc-aside-related__thumb { width: 48px; height: 48px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.cc-aside-related__thumb--ph { background: var(--cc-charcoal); }
.cc-aside-related__title { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--cc-black); display: block; }
.cc-aside-related__sub   { font-size: 11px; color: var(--cc-light); display: block; margin-top: 2px; }

.cc-aside-cat-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--cc-cream);
  font-size: 13px; font-weight: 500;
  transition: color .15s;
}
.cc-aside-cat-link:last-child { border-bottom: none; }
.cc-aside-cat-link:hover { color: var(--cc-accent); }
.cc-aside-cat-link span  { font-size: 11px; color: var(--cc-light); }

/* Stars */
.cc-stars { color: var(--cc-gold); letter-spacing: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MENTION CARDS — en noticias, muestra evento/artista/local relacionado
   ═══════════════════════════════════════════════════════════════════════════ */
.cc-single-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
  padding: 20px;
  background: var(--cc-cream);
  border-radius: var(--r-md);
  border: 1px solid #ddd8ce;
}
.cc-mention-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e2ddd4;
  border-radius: var(--r-md);
  padding: 12px 16px 12px 12px;
  text-decoration: none;
  flex: 1;
  min-width: 200px;
  transition: all .2s;
}
.cc-mention-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.09); transform: translateY(-2px); }
.cc-mention-card--evento  { border-left: 3px solid var(--cc-accent); }
.cc-mention-card--artista { border-left: 3px solid #9e0099; }
.cc-mention-card--local   { border-left: 3px solid #0066bb; }

.cc-mention-card__img {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.cc-mention-card__img--ph     { background: var(--cc-charcoal); }
.cc-mention-card__img--round  { border-radius: 50%; }

.cc-mention-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-mention-card__type  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--cc-light); }
.cc-mention-card__title { font-size: 14px; font-weight: 600; color: var(--cc-black); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-mention-card:hover .cc-mention-card__title { color: var(--cc-accent); }
.cc-mention-card__sub   { font-size: 12px; color: var(--cc-light); }

/* Single tags strip */
.cc-single-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cc-cream);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RECURRENCIA — bloque en ficha de evento
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-recurrence-block {
  background: var(--cc-cream);
  border: 1.5px solid var(--cc-accent);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: var(--sp-xl);
  position: relative;
  overflow: hidden;
}
.cc-recurrence-block::before {
  content: '🔁';
  position: absolute;
  font-size: 120px;
  right: -10px; top: -20px;
  opacity: .04;
  pointer-events: none;
  line-height: 1;
}

.cc-recurrence-block__header {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
.cc-recurrence-block__icon {
  font-size: 28px; line-height: 1; flex-shrink: 0;
}
.cc-recurrence-block__title {
  font-family: var(--ff-display);
  font-size: 22px; letter-spacing: 1px;
  margin: 0 0 4px;
}
.cc-recurrence-block__summary {
  font-size: 14px; color: var(--cc-accent);
  font-weight: 600; margin: 0;
}

/* Meta items row */
.cc-recurrence-block__meta {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid #ddd8ce;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 22px;
  background: #fff;
}
.cc-rec-meta-item {
  display: flex; flex-direction: column;
  padding: 12px 18px;
  border-right: 1px solid #e2ddd4;
  flex: 1; min-width: 100px;
}
.cc-rec-meta-item:last-child { border-right: none; }
.cc-rec-meta-item__label {
  font-size: 10px; color: var(--cc-light);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 3px;
}
.cc-rec-meta-item__val {
  font-size: 14px; font-weight: 600; color: var(--cc-black);
}

/* Calendar of dates */
.cc-recurrence-block__cal-title {
  font-family: var(--ff-display);
  font-size: 16px; letter-spacing: 1px;
  margin: 0 0 14px;
}
.cc-rec-calendar {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cc-rec-cal-item {
  display: flex; flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #e2ddd4;
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-width: 64px;
  text-align: center;
  position: relative;
  transition: all var(--tr-fast);
}
.cc-rec-cal-item:hover { border-color: var(--cc-accent); }
.cc-rec-cal-item--next {
  border-color: var(--cc-accent);
  background: rgba(232,0,176,.05);
}
.cc-rec-cal-item--more {
  background: var(--cc-cream);
  border-style: dashed;
  color: var(--cc-light);
  font-size: 14px; font-weight: 700;
  justify-content: center; gap: 2px;
}
.cc-rec-cal-item__next-badge {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--cc-accent); color: #fff;
  font-size: 9px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px;
  white-space: nowrap;
}
.cc-rec-cal-item__dow  { font-size: 10px; color: var(--cc-accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.cc-rec-cal-item__day  { font-family: var(--ff-display); font-size: 28px; line-height: 1.1; color: var(--cc-black); letter-spacing: 1px; }
.cc-rec-cal-item__mon  { font-size: 11px; color: var(--cc-mid); font-weight: 600; text-transform: uppercase; }
.cc-rec-cal-item__yr   { font-size: 10px; color: var(--cc-light); }
.cc-rec-cal-item__time { font-size: 11px; color: var(--cc-accent); font-weight: 600; margin-top: 3px; }

/* ── CARD recurring badge ────────────────────────────────────────────────── */
.cc-card__recurring-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700;
  color: var(--cc-accent);
  letter-spacing: .5px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .cc-recurrence-block__meta { flex-direction: column; }
  .cc-rec-meta-item { border-right: none; border-bottom: 1px solid #e2ddd4; }
  .cc-rec-meta-item:last-child { border-bottom: none; }
  .cc-rec-calendar { gap: 6px; }
  .cc-rec-cal-item { min-width: 54px; padding: 8px 8px; }
  .cc-rec-cal-item__day { font-size: 22px; }
}

/* ── SINGLE POST — garantizar visibilidad del contenido ─────────────────── */
/* Evitar que el hero o cualquier elemento tape el cuerpo del artículo */
.cc-single-wrap {
  position: relative;
  z-index: 1;           /* stacking context propio, por encima del hero */
}
.cc-single-body,
.cc-single-main {
  position: relative;
  z-index: 1;
  overflow: visible !important;   /* nunca ocultar contenido del artículo */
}
.cc-single-body p:first-child,
.cc-single-body > *:first-child {
  margin-top: 0;                  /* el primer elemento sin margen extra arriba */
}
/* Asegurar que el hero no extiende su overflow al contenido siguiente */
.cc-single-hero + .cc-single-wrap,
.cc-single-hero ~ .cc-single-wrap {
  margin-top: 0;
  clear: both;
}