/* =========================
   Ofertas (listado) – Responsive + Ads
   Solo CSS. No requiere tocar ofertas.html
   ========================= */

/* utilidades de accesibilidad */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- HERO ---------- */
.ofertas-hero {
  padding: 18px clamp(12px, 3vw, 16px) 10px;
  text-align: center;
}
.ofertas-hero h1 { color: var(--lc-primary-dark); }

/* ---------- Búsqueda ---------- */
.search-bar {
  max-width: 900px;
  margin: 8px auto 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.search-bar input {
  flex: 1 1 260px;
  padding: 10px 14px;
  border: 1px solid var(--lc-border);
  border-radius: 10px;
  background: var(--lc-surface);
}
.search-bar button {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--lc-primary-dark);
  color: #fff; font-weight: 600;
  cursor: pointer;
}

/* ---------- Row de resultados ---------- */
.results-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 0 auto 12px;
  max-width: 1180px;
  padding: 0 clamp(8px, 2vw, 10px);
  color: var(--lc-text-muted);
  flex-wrap: wrap;
}

/* ---------- Layout principal (contenido + ads) ---------- */
/* hijos del grid pueden encoger (evita scroll lateral) */
.ofertas-wrap, .ofertas-wrap > * { min-width: 0; }

.ofertas-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px; /* contenido | sidebar fija */
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px clamp(8px, 2vw, 12px);
  align-items: start;
}

/* Colapsa sidebar en pantallas medianas/pequeñas */
@media (max-width: 1200px) {
  .ofertas-wrap { grid-template-columns: 1fr; }
  .ofertas-page .right-ad { display: none !important; }
}

/* Paginación ocupa ancho completo del grid en desktop */
.ofertas-wrap .pager { grid-column: 1 / -1; }

/* ---------- Cards de ofertas ---------- */
.oferta-card {
  background: var(--lc-surface);
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .oferta-card:hover {
    box-shadow: 0 8px 20px rgba(10,102,194,.10);
    transform: translateY(-1px);
  }
}
.oferta-card h2 {
  font-size: clamp(1.06rem, 2.2vw, 1.2rem);
  margin-bottom: 6px;
  color: var(--lc-primary-dark);
}
.oferta-card p { margin: 4px 0; color: var(--lc-text-muted); }

.oferta-card .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 12px rgba(10,102,194,.2);
  transition: transform .1s, background .2s, box-shadow .2s;
}
.btn-apply { background: var(--lc-primary); color: #fff !important; }
.btn-apply:hover { background: #0b5db0; transform: translateY(-2px); box-shadow: 0 10px 18px rgba(10,102,194,.28); }
.btn-apply:active { transform: translateY(0); }

/* ---------- Paginación ---------- */
.pager {
  text-align: center;
  margin: 18px 0 10px;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.pager a {
  display: inline-block;
  min-width: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--lc-border);
  text-decoration: none;
  color: inherit; font-weight: 600;
  background: var(--lc-surface);
}
.pager a.active, .pager a:hover {
  background: var(--lc-primary);
  color: #fff; border-color: transparent;
}

/* ---------- Sidebar de anuncios (desktop) ---------- */
.ofertas-page .right-ad {
  position: sticky;
  top: 84px;              /* despega del header */
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.ofertas-page .right-ad .ad-slot {
  width: 100%;
  border: 1px solid var(--lc-border);
  border-radius: 12px;
  padding: 8px;
  background: var(--lc-surface);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  display: grid; place-items: center;
  /* reserva de altura para evitar CLS (se adapta al ins interno) */
  min-height: 260px; /* 300x250 / 160x600 se ajusta con el <ins> */
}

/* Si quieres un bloque alto tipo skyscraper en la parte superior */
.ofertas-page .right-ad .ad-slot:first-child { min-height: 620px; }

/* ---------- In-feed / bloque ancho (el que está debajo del listado) ---------- */
.ads-wide {
  max-width: 980px;
  margin: 18px auto;
  border: 1px solid var(--lc-border);
  background: linear-gradient(180deg, #fafbfd, #f7f9fc);
  border-radius: 12px;
  padding: 12px 8px;
  display: grid; place-items: center;
  min-height: 260px;
}
@media (max-width: 480px) { .ads-wide { min-height: 120px; } }

/* ---------- Micro-ajustes móviles ---------- */
@media (max-width: 700px) {
  .results-row { padding: 0 10px; }
  .oferta-card { padding: 16px; }
}

/* ---------- Accesibilidad ---------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--lc-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Card con logo en el encabezado (media object) --- */
.oferta-card .card-head{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.oferta-card .logo{
  width:56px;                 /* reserva tamaño => sin CLS */
  height:56px;
  object-fit:contain;
  border-radius:12px;
  background:#e9eef6;
  border:1px solid var(--lc-border);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.oferta-card .title{
  margin:0;
  font-size:1.12rem;
  line-height:1.3;
  color:var(--lc-primary-dark);
}

/* si por CORS/404 no se carga, ocultamos el hueco del logo */
.oferta-card.no-logo .card-head{
  grid-template-columns: 1fr; /* expandimos el título */
}