/*
 * Generic templates (page, single, archive, search, 404, store page, WooCommerce pages) and
 * editor-authored content. base.css resets margins and list styles for the prototype's
 * components; .prose restores a readable flow for content written in the block editor.
 * Loaded on every page (small), before header/footer.
 */

/* ---------- Page heading ---------- */
.page-head {
  padding-block: clamp(var(--s-5), 3.5vw, var(--s-7)) var(--s-4);
}

.page-title {
  /* = 24ch of Libre Caslon Display (its «0» is 0.622em). In em the limit does not depend on the
     «0» of the font in use, so the fallback wraps like the web font and nothing moves on swap. */
  max-width: 14.93em;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.page-title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-text);
}

.page-intro {
  max-width: 60ch;
  margin-top: var(--s-4);
  color: var(--text-soft);
  font-size: var(--fs-md);
}

/* ---------- Prose (post content) ---------- */
.prose {
  padding-bottom: var(--section-pad);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.prose > * {
  max-width: var(--measure);
}

.prose > .alignwide,
.prose > .alignfull,
.prose--wide > * {
  max-width: none;
}

.prose > * + * {
  margin-top: var(--s-4);
}

.prose > :is(h2, h3, h4) {
  margin-top: var(--s-7);
}

.prose > :is(h2, h3, h4) + * {
  margin-top: var(--s-3);
}

.prose h2 {
  font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem);
}

.prose h3 {
  font-size: var(--fs-xl);
}

.prose h4 {
  font-size: var(--fs-md);
  font-weight: 600;
}

/*
 * Lists written in the editor: the list block (.wp-block-list) or a class-less list.
 * Components rendered inside the content (store hours, gift cards, products…) always
 * carry their own classes, so these defaults never leak into them. :where() keeps them at
 * the weight of one class, so section styles (.tg-steps__list…) override them.
 */
.prose :where(ul, ol):where(.wp-block-list, :not([class])) {
  padding-left: 1.4em;
}

.prose ul:where(.wp-block-list, :not([class])) {
  list-style: disc;
}

.prose ol:where(.wp-block-list, :not([class])) {
  list-style: decimal;
}

.prose :where(ul, ol):where(.wp-block-list, :not([class])) > li + li {
  margin-top: var(--s-2);
}

.prose :where(ul, ol):where(.wp-block-list, :not([class])) > li::marker {
  color: var(--gold-ui);
}

.prose :is(p, li, td, dd) a:not(.btn):not(.wp-element-button) {
  text-decoration: underline;
  text-decoration-color: var(--gold-ui);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.prose :is(p, li, td, dd) a:not(.btn):not(.wp-element-button):hover {
  color: var(--gold-text);
}

.prose img {
  border-radius: var(--radius);
}

.prose :is(figcaption, .wp-element-caption) {
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-xs);
}

/* Tables written in the editor (table block or class-less); component tables keep their own look. */
.prose :is(.wp-block-table table, table:not([class])) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Core's table block draws a box around every cell; content tables only use row rules. */
.prose .wp-block-table :is(thead, tfoot) {
  border: 0;
}

.prose :is(.wp-block-table, table:not([class])) :is(th, td) {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose :is(.wp-block-table, table:not([class])) thead th {
  border-bottom-color: var(--line-strong);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* On phones, long unbroken tokens (the cookie names in /cookies/) wrap instead of pushing the last column off screen. */
@media (max-width: 599px) {
  .prose :is(.wp-block-table table, table:not([class])) {
    font-size: var(--fs-sm);
  }

  .prose :is(.wp-block-table, table:not([class])) :is(th, td) {
    padding-right: var(--s-3);
  }

  .prose :is(.wp-block-table, table:not([class])) :is(th, td) code {
    overflow-wrap: anywhere;
  }
}

.prose .wp-block-separator {
  margin-block: var(--s-7);
  border: 0;
  border-top: 1px solid var(--line);
}

.prose details {
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.prose summary {
  min-height: 44px;
  padding-block: var(--s-2);
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Content pages (page, page-wide, page-legal) ---------- */
/*
 * A stone band holds the breadcrumbs and the H1; when the content starts with a .tg-page-intro, the band continues behind it
 * (full-bleed background without extra markup), so title, lead and buttons read as one.
 */
.page-hero {
  background: var(--stone);
}

.page-hero .page-head {
  padding-block: clamp(var(--s-5), 3.5vw, var(--s-7)) var(--s-4);
}

.page-hero .page-title {
  max-width: 13.68em; /* = 22ch of Libre Caslon Display, see .page-title */
}

.page-crumbs,
.page-crumbs.wp-block-woocommerce-breadcrumbs {
  margin-bottom: var(--s-4);
  color: var(--muted);
  font-size: var(--fs-xs);
}

.page-crumbs a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.page-crumbs a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

.page-content {
  padding-top: clamp(var(--s-6), 4vw, var(--s-7));
}

.page-content > .tg-page-intro:first-child {
  margin-top: calc(-1 * clamp(var(--s-6), 4vw, var(--s-7)));
  padding-bottom: clamp(var(--s-5), 3vw, var(--s-6));
  background: var(--stone);
  box-shadow: 0 0 0 100vmax var(--stone);
  clip-path: inset(0 -100vmax);
}

.page-content > .tg-page-intro:first-child + * {
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
}

/* Full components placed in a page (prices, stores, gift cards) keep their own width. */
.page-content > :is(.section, .wp-block-trioni-store-list, .wp-block-trioni-gift-cards) {
  max-width: none;
}

/* A front-page section (e.g. trioni/front-prices) inside a page follows the page rhythm: no band padding, no rule. */
.page-content > .section {
  padding-block: 0;
}

/* …but keeps the same gap as a .tg-section when it follows other content (e.g. trioni/store-list in /contacto/). */
.page-content > * + .section {
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
}

.page-content > .section--ruled > .wrap {
  padding-top: 0;
}

.page-content > .section--ruled > .wrap::before {
  content: none;
}

/*
 * Legal pages: narrow reading column; every H2 (loose or opening a .tg-section) starts
 * after a hairline, so the headings scan like a table of contents. Writers give them ids.
 */
.prose--legal > * {
  max-width: 68ch;
}

.prose--legal h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

.prose--legal > h2,
.prose--legal > .tg-section {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.prose--legal > h2 {
  margin-top: var(--s-7);
}

/* No rule right under the title band. */
.prose--legal > :is(h2, .tg-section):first-child,
.prose--legal > .tg-page-intro:first-child + :is(h2, .tg-section) {
  padding-top: 0;
  border-top: 0;
}

.prose--legal h3 {
  font-size: var(--fs-lg);
}

.prose--legal :is(h2, h3)[id] {
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}

.prose--legal :is(p, li) {
  color: var(--text-soft);
}

.prose--legal :is(strong, a) {
  color: var(--text);
}

/* Landing pages: sections bring their own container; loose blocks get one. */
.landing > :where(:not(section):not(.section):not(.alignfull)) {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Post lists (index, archive, search) ---------- */
.post-list {
  padding-bottom: var(--section-pad);
}

.post-list__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}

.post-list__items > li {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.15;
}

.post-card__title a:hover {
  color: var(--gold-text);
}

.post-card__date,
.article__meta {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.post-card__excerpt p {
  color: var(--text-soft);
}

.post-card__excerpt .wp-block-post-excerpt__more-text {
  margin-top: var(--s-2);
}

.post-list__empty {
  max-width: 60ch;
  color: var(--text-soft);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-7);
}

.pagination :is(a, .page-numbers) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.pagination .page-numbers.current {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--on-ink);
}

.pagination .page-numbers.dots {
  border: 0;
}

/* ---------- Single article ---------- */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4);
}

.article__updated::before {
  content: 'Actualizado: ';
}

.article__media {
  max-width: var(--measure);
  margin-bottom: var(--s-6);
}

.article__media img {
  width: 100%;
  border-radius: 6px;
}

/* ---------- Search form ---------- */
.search-form {
  max-width: 560px;
  margin-top: var(--s-5);
}

.search-form .wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--s-2);
}

.search-form .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ---------- 404 ---------- */
.not-found {
  padding-bottom: var(--section-pad);
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* ---------- Store page (single trioni_store) ---------- */
.store-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-6) clamp(var(--s-6), 5vw, var(--s-8));
  align-items: start;
  padding-block: clamp(var(--s-6), 5vw, var(--s-8)) var(--s-7);
}

.store-page__intro {
  display: grid;
  gap: var(--s-3);
}

.store-page__intro .eyebrow {
  margin-bottom: 0;
}

.store-page__intro .page-crumbs {
  margin-bottom: 0;
}

.store-page__address {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
}

.store-page__metro {
  color: var(--muted);
}

.store-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block: var(--s-3) var(--s-4);
}

.store-page__actions .is-style-outline > .wp-block-button__link {
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.store-page__actions .is-style-outline > .wp-block-button__link:hover {
  background: var(--ink);
  color: var(--on-ink);
}

.store-page__map {
  margin: 0;
}

.store-page__map img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--stone);
}

.store-page__map figcaption {
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--fs-2xs);
}

.store-page__body {
  display: grid;
  gap: var(--s-6);
}

.store-page__photo img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 6px;
}

/* ---------- WooCommerce: archives and store pages (the product page is in product.css) ---------- */
.shop-archive,
.shop-landing,
.wc-page {
  padding-bottom: var(--section-pad);
}

/* Search results keep the breadcrumbs above the H1 inside the container (no stone band). */
.shop-archive :not(.page-crumbs) > .woocommerce-breadcrumb {
  padding-top: var(--s-5);
}

.shop-archive .page-title {
  margin-block: var(--s-4) var(--s-2);
}

.wc-page .page-title {
  margin-block: var(--s-6) var(--s-5);
}

/* Empty block cart (Shop\empty_cart_block()): title, one line, the shop and its sections. */
.wp-block-woocommerce-empty-cart-block {
  padding-block: var(--s-5) var(--s-7);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-h3);
}

.cart-empty {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}

.cart-empty p {
  max-width: 52ch;
  margin: 0;
  color: var(--text-soft);
}

.cart-empty__families {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  font-size: var(--fs-sm);
}

.cart-empty__families a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

/* Block cart, narrow container (WooCommerce adds .is-mobile): its grid (80px 132px + the total in
   an implicit column) is wider than a 320-360px phone, because the quantity row sets a ~160px
   minimum for the product column. The total goes under the product instead of beside it. */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: 64px minmax(0, 1fr);
  row-gap: var(--s-2);
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
  grid-row: 1 / span 2;
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
  grid-column: 2 / 3;
  min-width: 0;
}

.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.wc-block-cart .wc-block-components-product-metadata {
  overflow-wrap: anywhere;
}

/* Block checkout, 700-899px container: WooCommerce keeps two columns there and the 35 % summary
   (~250px) cuts the line amounts and breaks words letter by letter. One column, summary first,
   as WooCommerce itself does below 700px. */
@container (min-width: 700px) and (max-width: 899px) {
  .wc-block-checkout .wc-block-components-sidebar-layout,
  .wc-block-checkout .wc-block-components-sidebar-layout:has(> :last-child.wp-block-woocommerce-checkout-fields-block) {
    flex-direction: column;
  }

  .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
  .wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 100%;
    padding: 0;
  }

  .wc-block-checkout .wc-block-checkout__main {
    order: 1;
  }

  .wc-block-checkout .wc-block-checkout__sidebar {
    order: 0;
    margin-bottom: 24px;
  }
}

/* ---------- Legal and trust notices (trioni-core: withdrawal, AML, grain for professionals) ---------- */
.trioni-notice {
  max-width: var(--measure);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border: 0;
  border-left: 2px solid var(--gold-ui);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--gold-wash);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.trioni-notice::before {
  content: none;
}

.trioni-notice > * + * {
  margin-top: var(--s-2);
}

.trioni-notice strong {
  color: var(--text);
}

.trioni-notice ul {
  padding-left: 1.2em;
  list-style: disc;
}

.trioni-notice--aml {
  border-left-color: var(--ink);
}

.trioni-notice--pro {
  border-left-color: var(--gold-text);
}

/* ---------- Reserve mode: cart and data page ----------
   One gateway, already chosen, and one figure («Precio de hoy, orientativo»): the payment step,
   the rows above the figure and what WooCommerce words as a purchase are not rendered. */
.tg-mode-reserve .wc-block-checkout__payment-method,
.tg-mode-reserve .wp-block-woocommerce-checkout-order-summary-totals-block,
.tg-mode-reserve .wp-block-woocommerce-cart-order-summary-totals-block,
.tg-mode-reserve .wc-block-checkout__guest-checkout-notice,
.tg-mode-reserve .wc-block-components-checkout-order-summary__title-text,
.tg-mode-reserve .wc-block-components-checkout-order-summary__title[role="button"],
.tg-mode-reserve .checkout-order-summary-block-fill-wrapper .wc-block-components-checkout-step__heading,
.tg-mode-reserve .wc-block-cart__totals-title,
.tg-mode-reserve .wc-block-cart-items__header-total span {
  display: none;
}

/* Confirmation of a reservation (Reserve\Confirmation): the cream notice; its first line
   carries number, store and deadline. */
.trioni-reserve-done > :first-child {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
}

/* Replaces a price that cannot be sold online right now: plain text, not a figure. */
.trioni-price-blocked {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
}

/* «/g» after the grain price. */
.trioni-price-unit {
  margin-left: 1px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
}

/* ---------- Checkout header ---------- */
.site-header--checkout .site-header__inner {
  justify-content: space-between;
}

.checkout-trust {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  color: var(--on-ink-muted);
  font-size: var(--fs-sm);
}

.checkout-trust svg {
  width: 18px;
  height: 18px;
  color: var(--gold-on-ink);
}

.checkout-trust a {
  color: var(--on-ink);
}

/* No floating action bar over cart and checkout forms. */
.woocommerce-cart .action-bar,
.woocommerce-checkout .action-bar {
  display: none !important;
}

@media (max-width: 1179px) {
  body.woocommerce-cart,
  body.woocommerce-checkout {
    padding-bottom: 0;
  }
}

/* Logged-in staff: keep the skip link below the admin bar. */
.admin-bar .skip-link {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--s-2));
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1099px) {
  .post-list__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .store-page__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 559px) {
  .post-list__items {
    grid-template-columns: 1fr;
  }

  .search-form .wp-block-search__inside-wrapper {
    flex-direction: column;
  }
}