/**
 * La taula de l'Ebre.
 *
 * Fusta, ventall de cartes i plat de servir. Els colors surten dels tokens del
 * skin, així que la secció canvia de marca sola.
 */

/* Res d'aïllar la secció amb un context d'apilament: si ho fes, la fitxa (que
   és fixed) hi quedaria tancada a dins i no taparia la capçalera. Les cartes i
   el plat es reparteixen z-index baixos, per sota de la capçalera enganxada
   (100) i molt per sota de la fitxa (1000). */
.taula-ebre {
  position: relative;
  overflow: hidden;
}

/* ===== Capçalera ===== */
.taula-ebre__capcalera {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 64rem) {
  .taula-ebre__capcalera {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
}

.taula-ebre__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(var(--brand-accent));
}

.taula-ebre__titol {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  color: rgb(var(--brand-primary));
}

.taula-ebre__subratllat {
  display: block;
  width: 9rem;
  height: auto;
  margin-top: 0.65rem;
  color: rgb(var(--brand-accent));
}

.taula-ebre__tagline {
  margin: 0;
  max-width: 32rem;
  font-family: var(--font-hand, cursive);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: rgb(var(--neutral-text-muted));
}

@media (min-width: 64rem) {
  .taula-ebre__tagline { text-align: right; }
}

/* ===== Taula de fusta =====
   És una post de fusta damunt de la pàgina, no un fons a sangre: per això va
   dins del contenidor i amb el cantell arrodonit del skin. */
.taula-ebre__fusta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 2px);
  padding: 2.5rem 0 0;
  background-color: #8a6438;
  background-image:
    repeating-linear-gradient(90deg,
      rgb(0 0 0 / 0.07) 0 1px,
      transparent 1px 7px,
      rgb(255 255 255 / 0.04) 7px 8px,
      transparent 8px 44px),
    linear-gradient(180deg, #96703f 0%, #7d5a31 55%, #6b4c28 100%);
  box-shadow: inset 0 12px 30px -18px rgb(0 0 0 / 0.7);
}

.taula-ebre__ombra {
  position: absolute;
  top: 26.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(28rem, 80%);
  height: 6rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(38 24 8 / 0.45), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

/* ===== Ventall ===== */
.taula-ebre__viewport {
  position: relative;
  width: 100%;
  height: 32.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.taula-ebre__pista {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.taula-carta {
  position: absolute;
  width: 16.25rem;
  height: 23.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 1.5rem 2.5rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(var(--neutral-border) / 0.3);
  border-radius: var(--radius-lg, 2px);
  box-shadow: 0 12px 30px -18px rgb(0 0 0 / 0.6);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
  will-change: transform;
}

@media (min-width: 48rem) {
  .taula-carta {
    width: 18.75rem;
    height: 27.5rem;
  }
}

.taula-carta__boto {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.taula-carta__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.taula-carta:hover .taula-carta__foto { transform: scale(1.08); }

.taula-carta__vel {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(40 40 40 / 0.95), rgb(40 40 40 / 0.45) 45%, transparent 78%),
    linear-gradient(to top right, rgb(var(--brand-primary) / 0.35), transparent 60%);
}

.taula-carta__numero {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  z-index: 2;
  font-family: var(--font-heading, sans-serif);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: rgb(255 255 255 / 0.85);
}

.taula-carta__numero span { color: rgb(var(--brand-accent)); }

.taula-carta__filigrana {
  position: absolute;
  right: 0.5rem;
  bottom: -1.25rem;
  z-index: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 8.125rem;
  font-weight: 900;
  line-height: 1;
  color: rgb(255 255 255 / 0.1);
  user-select: none;
  pointer-events: none;
}

.taula-carta__peu {
  position: relative;
  z-index: 2;
}

.taula-carta__xips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.taula-carta__xip {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill, 2px);
  background: rgb(255 255 255 / 0.12);
  backdrop-filter: blur(4px);
  font-family: var(--font-sans, sans-serif);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--brand-accent));
}

.taula-carta__local {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.75rem;
  font-style: italic;
  color: rgb(255 255 255 / 0.75);
}

.taula-carta__titol {
  margin: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}

@media (min-width: 48rem) {
  .taula-carta__titol { font-size: 1.5rem; }
}

/* ===== Plat de servir i coberts =====
   Per damunt del ventall: el plat trepitja la carta activa, com a taula. Les
   cartes van de 10 a 40, així que el servei passa amb 60 i encara queda per
   sota de la capçalera. */
.taula-ebre__servei {
  position: relative;
  z-index: 60;
  width: 100%;
  max-width: 34.25rem;
  margin: -5rem auto 0;
  padding-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.t-primary { stroke: rgb(var(--brand-primary)); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.t-secondary { stroke: rgb(var(--brand-accent)); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.t-ple-accent { fill: rgb(var(--brand-accent)); }

.taula-plat {
  position: relative;
  z-index: 3;
  width: 16rem;
  height: 16rem;
  flex-shrink: 0;
}

.taula-plat > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.taula-plat__punts {
  position: absolute;
  inset: 0;
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.taula-punt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(var(--brand-primary) / 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.taula-punt:hover { background: rgb(var(--brand-accent)); }

.taula-punt.is-actiu {
  width: 12px;
  height: 12px;
  background: rgb(var(--brand-accent));
  box-shadow: 0 0 0 2px #fff;
  z-index: 2;
}

.taula-plat__marca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.taula-plat__marca img {
  width: 116px;
  height: auto;
}

.taula-cobert {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.taula-cobert[data-taula-anterior] { left: 0; }
.taula-cobert[data-taula-seguent] { right: 0; }

@media (min-width: 48rem) {
  .taula-cobert[data-taula-anterior] { left: 1rem; }
  .taula-cobert[data-taula-seguent] { right: 1rem; }
}

.taula-cobert__plat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  filter: drop-shadow(0 10px 16px rgb(74 48 18 / 0.28));
}

.taula-cobert__plat > svg:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.taula-cobert__eina {
  position: relative;
  z-index: 2;
  height: 4.25rem;
  width: auto;
  transition: transform 0.3s ease-out;
}

.taula-cobert[data-taula-anterior]:hover .taula-cobert__eina { transform: rotate(-12deg); }
.taula-cobert[data-taula-seguent]:hover .taula-cobert__eina { transform: rotate(12deg); }

.taula-cobert__text {
  font-family: var(--font-heading, sans-serif);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 1px 3px rgb(38 24 8 / 0.65);
}

.taula-cobert:hover .taula-cobert__text { color: #fff; }

.taula-ebre__peu {
  max-width: 60rem;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  text-align: center;
  font-family: var(--font-sans, sans-serif);
  font-size: 0.9375rem;
  color: rgb(var(--neutral-text-muted));
}

/* ===== Fitxa ===== */
.taula-fitxa {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.taula-fitxa.is-oberta { opacity: 1; }

.taula-fitxa__fons {
  position: absolute;
  inset: 0;
  background: rgb(40 40 40 / 0.75);
  backdrop-filter: blur(4px);
  border: 0;
  cursor: pointer;
}

.taula-fitxa__caixa {
  position: relative;
  z-index: 1;
  width: min(56rem, 100%);
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: var(--radius-lg, 2px);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.7);
  transform: scale(0.96);
  transition: transform 0.3s ease;
}

.taula-fitxa.is-oberta .taula-fitxa__caixa { transform: scale(1); }

/* Les dues columnes van a la vista, no a la caixa: la caixa hi allotja dues
   vistes (fitxa i taller) i cadascuna es reparteix l'espai a la seva manera. */
.taula-fitxa__vista[data-vista="fitxa"] {
  display: grid;
  align-items: stretch;
}

@media (min-width: 48rem) {
  .taula-fitxa__vista[data-vista="fitxa"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.taula-fitxa__media { position: relative; min-height: 14rem; }

.taula-fitxa__media img {
  width: 100%;
  height: 100%;
  min-height: 14rem;
  object-fit: cover;
  display: block;
}

.taula-fitxa__cos {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 48rem) {
  .taula-fitxa__cos { padding: 2.75rem; }
}

.taula-fitxa__xip {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill, 2px);
  background: rgb(var(--brand-accent) / 0.15);
  font-family: var(--font-sans, sans-serif);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--brand-primary));
}

.taula-fitxa__xip:empty { display: none; }

.taula-fitxa__local {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.875rem;
  font-style: italic;
  color: rgb(var(--neutral-text-muted));
}

.taula-fitxa__titol {
  margin: 0.25rem 0 1rem;
  font-family: var(--font-heading, sans-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: rgb(var(--brand-primary));
}

.taula-fitxa__text {
  margin: 0;
  font-family: var(--font-sans, sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: rgb(var(--neutral-text-main));
}

.taula-fitxa__accions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.taula-fitxa__accions:empty { display: none; }

.taula-fitxa__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill, 2px);
  background: rgb(var(--brand-accent));
  color: rgb(var(--on-accent, var(--brand-primary)));
  font-family: var(--font-heading, sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}

.taula-fitxa__cta:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  color: rgb(var(--on-accent, var(--brand-primary)));
}

.taula-fitxa__tanca {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: rgb(var(--brand-primary));
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.6);
}

.taula-fitxa__tanca:hover { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .taula-carta,
  .taula-plat__punts,
  .taula-fitxa,
  .taula-fitxa__caixa { transition: none; }
}