/*
  Proyecto: Zinemakumeak gara!
  Fecha: 07/05/2023
  Autor: Josu Eguren
  Versión: 4.0
  Descripción: Estilos personalizados para el sitio web de Zinemakumeak gara!
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

.isotope-filter{
    position: static:
}

.link-body a {
	color: #60697b !important;
}

.comma:not(:last-child):after {
	content: ", ";
}

.comma:last-child:after {
	content: ". ";
}

.comma-nd:not(:last-child):after {
	content: ", ";
}

.breadcrumb-item {
	color: white;
}

.compact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.compact-list li {
  line-height: 1.5em;
  font-size: 1em;
}

.compact-list li a {
  text-decoration: underline;
}

.angle-symbol::before {
  content: "\00BB";
  margin-right: 0.1em;
}

/*--------------------------------------------------------------
# programa
--------------------------------------------------------------*/

#programa table {
	font: normal 300 0.85rem / 1.7rem;
	word-spacing: normal;
}

#programa table td, #programa table th {
    padding: .75rem;
    vertical-align: top;
}

#programa td.titulo, #programa td.titulo p {
	font-size: 90%;
}

#programa tr.cabecera th u, #programa td.titulo a, #programa td.titulo u, #programa td.lugar a, #programa td.lugar u {
	color: #000;
}

#programa tr.cabecera th u {
	cursor: pointer;
}

#programa span.film {
	font-size: 130%;
	font-weight: fw-bold;
	text-transform: uppercase;
}

#programa span.extra {
	text-transform: uppercase;
    font-size: 85%;
    padding: 0.2rem;
	background-color: var(--bs-highlight-bg);
}

/*--------------------------------------------------------------
# programa cards
--------------------------------------------------------------*/

.circle {
width: 5em; /* Tamaño del círculo en em (unidad relativa al tamaño del texto) */
    height: 5em; /* Altura del círculo en em */
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.96em; /* Tamaño del texto en em */
    line-height: 1;
    margin-bottom: 1em; /* Margen inferior en em */
    padding: 0.5em; /* Padding interior en em */
}

.card-body p {
    font-size: 0.96em; /* Tamaño del texto en em */
}

/*--------------------------------------------------------------
# reCAPTCHA
--------------------------------------------------------------*/

/* Move reCAPTCHA v3 badge to the left */
.grecaptcha-badge {
	width: 70px !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	left: 4px !important;
}

/*--------------------------------------------------------------
# CARDS
--------------------------------------------------------------*/

/* ==== Contenedor del artículo ==== */
.item.post {
  position: relative;
}

/* Enlace que envuelve todo el artículo */
.article-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ==== Tarjeta ==== */
.card {
  transition: background-color 0.3s ease; /* transición solo en el fondo */
}

/* Hover: cambia el fondo de la tarjeta */
.item.post:hover .card {
  background-color: #cdcecf; /* gris claro */
}

/* ==== Imagen de la tarjeta ==== */
.card-img-top {
  position: relative; /* permite posicionar elementos encima */
  margin: 0;
}

/* ==== Botón sobre la imagen ==== */
.card-img-top .btn {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 10;
  font-size: 0.8em;
  padding: 6px 12px;
  background-color: #747ed1;
  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  text-transform: uppercase
}

/* Hover: solo cambia el fondo a más transparente */
.card-img-top .btn:hover {
  background-color: rgba(116, 126, 209, 0.8);
}

.badge-soft {
  display: inline-block;
  padding: 5px 12px;
  background-color: #3b7d5a;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  border-radius: 14px;
  line-height: 1.3;
  user-select: none;
  }