/* ==========================================================================
   Sección Libros — grid, filtro y popup de libro
   ========================================================================== */

/* ---- Filtro: toggle Estilo/Fotógrafo + select a la derecha ---- */
.books-filter { flex-wrap: nowrap; }
.books-filter__toggle {
  display: inline-flex;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.books-filter .filter-select { flex: 1 1 auto; max-width: 340px; }
/* El <select> real vive dentro de .mobile-select-wrap (js/mobile-select.js),
   así que el flex-grow de arriba no llega al layout: se repite aquí sobre
   el wrapper y el select pasa a ocupar el 100% de su ancho. */
.books-filter .mobile-select-wrap { flex: 1 1 auto; max-width: 340px; }
.books-filter .mobile-select-wrap .filter-select { width: 100%; }

/* ---- Grid: 4 columnas en escritorio ---- */
.books-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-gutter);
  align-items: start;
}
@media (min-width: 768px) { .books-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .books-grid { grid-template-columns: repeat(4, 1fr); } }

.book-card {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  padding: 0;
  color: inherit;
}
.book-card__cover {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-default);
  overflow: hidden;
  background-color: var(--color-surface-container-high);
  box-shadow: var(--shadow-ambient);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.book-card:hover .book-card__cover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.book-card__cover img,
.book-detail__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.book-card__title {
  margin-top: var(--space-sm);
  font-size: var(--font-body-md-size);
  font-weight: 600;
  line-height: 1.3;
}
.book-card__author {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-on-surface-variant);
}
/* Portada tipográfica mientras no hay foto real del libro */
.book-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  background: var(--color-primary-container);
  color: var(--color-on-primary);
}
.book-cover-placeholder__title { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.book-cover-placeholder__author { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

.books-empty { grid-column: 1 / -1; color: var(--color-on-surface-variant); }

/* ---- Popup ---- */
.book-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: var(--space-md) var(--space-sm); }
.book-modal[hidden] { display: none; }
.book-modal__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); }
.book-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-block: auto;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}
/* Envoltorio sin tamaño (sticky) que ancla el botón de cerrar a la esquina
   superior derecha del popup, visible por encima del contenido al hacer scroll. */
.book-modal__close-wrap {
  position: sticky;
  top: 0;
  width: 0;
  height: 0;
  margin-left: auto;
  order: 1;
  overflow: visible;
  z-index: 5;
}
.book-modal__close {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 8px;
  cursor: pointer;
  color: var(--color-on-surface);
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #000;
  border-radius: var(--radius-full);
}
.book-detail { display: flex; flex-direction: column; gap: var(--space-md); }

/* Sección 1: portada a la izquierda, título + datos (uno bajo otro) a la derecha */
.book-detail__head { display: flex; gap: var(--space-md); align-items: flex-start; }
.book-detail__cover { flex: none; width: 140px; aspect-ratio: 3 / 4; border-radius: var(--radius-default); overflow: hidden; background: var(--color-surface-container-high); }
.book-detail__info { min-width: 0; }
.book-detail__title { font-size: var(--font-headline-md-size); font-weight: 700; padding-right: 32px; margin-bottom: var(--space-sm); }
.book-detail__data { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.book-detail__data > div { display: flex; gap: var(--space-sm); }
.book-detail__data dt { flex: none; width: 84px; color: var(--color-on-surface-variant); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding-top: 2px; }
.book-detail__data dd { margin: 0; }
.book-detail__data a { text-decoration: underline; }

/* Sección 2: texto descriptivo, en bloque propio a todo el ancho */
.book-detail__text { font-size: 15px; line-height: 1.6; text-align: justify; hyphens: auto; padding-top: var(--space-md); border-top: 1px solid var(--color-input-border); }
.book-detail__text u { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.book-detail__text p + p { margin-top: 10px; }

/* Enlace a la fuente externa (mismo estilo que el de los proyectos de cada fotógrafo) */
.book-source-link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-xs); font-size: 16px; font-weight: 600; color: var(--color-primary); text-decoration: none; }
.book-source-link svg { flex-shrink: 0; }
.book-source-link__domain { color: #a5a5a5; }
.book-source-link:hover { text-decoration: underline; }

/* Texto destacado antes del slider */
.book-detail__highlight { margin: var(--space-md) 0; padding-left: var(--space-md); border-left: 3px solid var(--color-primary); font-size: var(--font-headline-md-size); font-weight: 500; line-height: 1.3; letter-spacing: var(--font-headline-md-tracking); }

/* Sección 3: slider de imágenes, de 1 en 1, sin fondo, con flechas y dots debajo */
.book-slider { padding-bottom: var(--space-md); }
.book-slider__stage { position: relative; }
.book-slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.book-slider__track::-webkit-scrollbar { display: none; }
.book-slider__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; height: clamp(280px, 62vh, 620px); display: flex; align-items: center; justify-content: center; }
.book-slider__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.book-slider__slide--mock { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-on-surface-variant); background: repeating-linear-gradient(135deg, var(--color-surface-container-high), var(--color-surface-container-high) 10px, var(--color-surface-container) 10px, var(--color-surface-container) 20px); }
.book-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); cursor: pointer; background: rgba(0,0,0,0.65); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25); font-size: 20px; line-height: 1; transition: background 0.2s ease; }
.book-slider__btn--prev { left: 12px; }
.book-slider__btn--next { right: 12px; }
.book-slider__btn:hover { background: var(--color-primary); }
.book-slider__dots { display: flex; justify-content: center; gap: 4px; margin-top: var(--space-xs); }
.book-slider__dot { width: 24px; height: 24px; padding: 0; background: none; cursor: pointer; position: relative; }
.book-slider__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--color-outline-variant); transition: background 0.2s ease, transform 0.2s ease; }
.book-slider__dot:hover::after { background: var(--color-outline); }
.book-slider__dot.is-active::after { background: var(--color-primary); transform: scale(1.25); }

/* Escritorio: popup centrado; si el contenido no cabe en la ventana, hace scroll */
@media (min-width: 900px) {
  .book-modal { align-items: center; overflow: hidden; padding: 20px; }
  .book-modal__dialog { max-height: calc(100vh - 40px); overflow-y: auto; display: flex; padding: 0 20px 40px 20px; }
  .book-modal__content { width: 100%; display: flex; }
  .book-detail { width: 100%; gap: 18px; }
  .book-detail__cover { width: 170px; }
  /* Cabecera fija arriba del popup al hacer scroll por el contenido */
  .book-detail__head { position: sticky; top: 0; z-index: 3; background: #fff; padding: 16px; }
}

@media (max-width: 767px) {
  .books-filter .filter-select { width: auto; min-width: 0; }
  .hero { min-height: auto; }
}

@media (max-width: 439px) {
  .book-detail__head { flex-direction: column; }
  /* Menos altura de imagen para reducir el hueco por arriba y abajo del slider */
  .book-slider__slide { height: clamp(180px, 38vh, 320px); }
  .books-filter .view-toggle__btn { font-size: 10px; }
}
body.modal-open { overflow: hidden; }