/* css/10-card.css - tarjeta de frase (corregida, fullscreen robusto para móvil) */

/* Tokens y variables locales */
:root{
  --card-radius: 18px;
  --card-shadow: 0 20px 60px rgba(6,10,18,0.12);
  --text-large-strong: clamp(1.2rem, 5.6vw, 1.85rem);
  --card-max-height-mobile: 78vh;
}

/* Contenedor principal de la tarjeta */
.frase-card {
  width: min(96%, 920px);
  max-width: 920px;
  margin: 18px auto;
  border-radius: var(--card-radius);
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
  border: 1px solid rgba(7,20,34,0.03);
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

/* Fullscreen variant: ocupa viewport debajo del header y arriba del footer */
.frase-card.fullscreen {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height, 72px);
  /* <-- usar el espacio reservado para el footer en lugar de bottom:0 */
  bottom: var(--footer-space, 64px);
  /* altura calculada restando header + footer */
  height: calc(100vh - var(--header-height,72px) - var(--footer-space,64px));
  width: 100vw;
  max-width: none;
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  padding: 0;
  z-index: 1100; /* Footer debe tener z-index mayor (p.ej. 1500) */
  box-sizing: border-box;
}

/* Background image layer */
.frase-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.82) saturate(0.96);
  transition: background 420ms ease, filter 420ms ease;
  z-index: 0;
}

/* Content area (arriba del bg) */
.frase-card .frase-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 920px;
  padding: clamp(20px, 6vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  max-height: var(--card-max-height-mobile);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* When fullscreen, allow the content to expand and center */
.frase-card.fullscreen .frase-content {
  max-height: none;
  overflow: auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(18px, 5vw, 36px);
  width: 100%;
  box-sizing: border-box;
}

/* Texto principal */
.frase-text {
  font-size: var(--text-large-strong);
  font-weight: 800;
  line-height: 1.2;
  color: #072032;

  /* ⚠️ BASELINE (no agresivo): el fix de layout se aplicará con .frc-fix-no-hyphen */
  hyphens: auto;
  word-break: normal;
  overflow-wrap: break-word;

  /* ⚠️ pre-wrap respeta los \n y crea columna vertical si el texto tiene saltos */
  white-space: normal;

  margin: 0;
  padding: 0;
  max-width: 92%;
}

/* ✅ FIX: cuando la frase tiene clase del parche, NO respetar saltos de línea y evitar columna */
#frase-text.frc-fix-no-hyphen{
  white-space: normal !important;
  overflow-wrap: anywhere !important; /* por si hay palabras largas */
  word-break: normal !important;
  hyphens: none !important;
  max-width: min(44ch, calc(100% - 32px)) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  text-align: center !important;
  width: auto !important;
}

/* Texto mayor en fullscreen */
.frase-card.fullscreen .frase-text {
  font-size: clamp(1.4rem, 6vw, 2.6rem);
  line-height: 1.15;
  max-width: 92%;
}

/* Controls row */
.frase-controls {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  margin-top: 12px;
  z-index: 2;
  flex-wrap:wrap;
}

/* Pin controls bottom center when fullscreen */
.frase-card.fullscreen .frase-controls {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  justify-content: center;
  background: transparent;
  z-index: 1200;
}

/* Button styling */
.control {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(7,20,34,0.06);
  color: #072032;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-sizing: border-box;
}

/* Mobile fallback */
@media (max-width:640px){
  .frase-card { width:98%; margin:10px auto; border-radius:14px; position: relative; }
  /* En móviles, si la clase fullscreen está activa, la regla superior la fijará como fixed */
  .frase-card .frase-content { padding:18px; min-height:180px; }
  .frase-card .frase-controls { position: static; transform:none; margin-top: 12px; }
  .frase-card.fullscreen .frase-controls { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); }
}

/* Defensive rules: avoid floats/columns inside the card */
.frase-card *, .frase-card *::before, .frase-card *::after {
  float: none !important;
  column-count: auto !important;
  column-width: auto !important;
}

/* Accessibility focus */
.control:focus { outline: 3px solid rgba(94,193,255,0.2); outline-offset: 3px; }