/*
 * pages/vitrina.css: the directory page (GET /vitrina/, rendered by api/src/views/pages/vitrina.js).
 * Composes: .c-section/.c-container, .c-search + .c-input (form.css), .c-chip-row + label.c-chip-option >
 * input.c-chip__input + span.c-chip--filter (chip.css), .c-button, .c-link--standalone, .c-notice--info,
 * .c-card-grid + .c-card (card.css), .c-media (placeholder.css), .c-empty (empty-state.css).
 * Page-only rules (prefix vt-): the heading block, the filter fieldsets, the count line, pagination, and the
 * long-name wrapping of the card title. Tokens only, no hex, dvh not vh, mobile first.
 * Pagination has no component yet (finding for the W2-C report), so its look lives here.
 */

/* Taste pass: .c-section--tight stacks 3rem below the filters and 3rem above the results, which pushed the
   first card a hundred pixels below "Filtrar" on a phone. Pull the two sections closer. */
.vt-top {
  padding-block-end: var(--md-space-4);
}

.vt-results {
  padding-block-start: var(--md-space-4);
}

/*
 * The comuna map, folded into a <details> that is closed in the HTML: on a phone only the 48 px summary
 * shows, so the first result stays within the second screen (AGENTS section 2B). vitrina.js opens it from
 * 64em. The section gives up its own padding; the summary and the open map carry their spacing.
 */
.vt-mapsection {
  padding-block: 0;
}

.vt-map__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-space-3);
  min-block-size: var(--md-target);
  padding: var(--md-space-2) var(--md-space-4);
  border: var(--md-border-width-strong) solid var(--md-color-border);
  border-radius: var(--md-radius-full);
  background: var(--md-color-surface);
  color: var(--md-color-ink);
  font-weight: var(--md-weight-bold);
  line-height: var(--md-leading-snug);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Safari keeps its own disclosure triangle unless it is removed explicitly. */
.vt-map__summary::-webkit-details-marker {
  display: none;
}

/* The chevron is drawn with borders so it follows currentColor and needs no image. */
.vt-map__summary::after {
  content: '';
  flex: none;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-block-end: 0.25rem;
  border-inline-end: var(--md-border-width-strong) solid currentColor;
  border-block-end: var(--md-border-width-strong) solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--md-duration-fast) var(--md-ease-out);
}

.vt-map[open] > .vt-map__summary::after {
  margin-block: 0.25rem 0;
  transform: rotate(-135deg);
}

@media (hover: hover) {
  .vt-map__summary:hover {
    border-color: var(--md-color-primary);
  }
}

.vt-map__summary:focus-visible {
  outline: var(--md-focus-width) solid var(--md-color-primary);
  outline-offset: var(--md-focus-offset);
}

.vt-map[open] {
  padding-block-end: var(--md-space-5);
}

.vt-map[open] > .c-comuna-map {
  margin-block-start: var(--md-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .vt-map__summary::after {
    transition: none;
  }
}

/*
 * On a wide screen there is room, so the map is simply shown: no script, no layout shift after load.
 * ::details-content lets a closed <details> keep its content visible; the summary then has nothing
 * left to toggle, so it goes too (the figure keeps its own heading, "Mapa de comunas"). Where the
 * pseudo-element is not supported, this block does not apply and js/vitrina.js opens the <details>
 * instead, as before. On a phone nothing changes: the map stays folded under its summary.
 */
@media (min-width: 64em) {
  @supports selector(::details-content) {
    .vt-map::details-content {
      content-visibility: visible;
      block-size: auto;
    }

    .vt-map > .vt-map__summary {
      display: none;
    }

    .vt-map {
      padding-block-end: var(--md-space-5);
    }
  }
}

.vt-top__inner {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-5);
}

/* A compact heading: a page title, not a hero. Two lines or fewer at every width. */
.vt-top h1 {
  max-inline-size: 18ch;
  font-size: clamp(var(--md-font-size-2xl), 1.25rem + 3vw, var(--md-font-size-3xl));
}

.vt-lede {
  font-size: var(--md-font-size-lg);
  max-inline-size: var(--md-measure);
  color: var(--md-color-ink-soft);
}

/* One GET form holds the search pill, both filter groups and the submit row. */
.vt-filters {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
}

.vt-filters .c-search {
  max-inline-size: 40rem;
}

/* A fieldset is a group of radios; reset the browser box and keep the legend as a small label. */
.vt-filter {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.vt-filter__legend {
  padding: 0;
  margin-block-end: var(--md-space-2);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
  color: var(--md-color-ink-soft);
}

.vt-filters__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-space-3) var(--md-space-5);
}

/* On a phone the chip rows swipe sideways (chip.css --scroll). From 48em there is room to wrap them, so a
   row is never cut at the edge on a tablet (taste pass: side-scroll). */
@media (min-width: 48em) {
  .vt-filter .c-chip-row--scroll {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
    margin: 0;
    /* Wrapped, nothing is cut at the edge: drop the swipe fade of chip.css. */
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.vt-count {
  margin-block-end: var(--md-space-4);
  font-size: var(--md-font-size-sm);
  color: var(--md-color-ink-soft);
}

/*
 * A card title can be as long as a business name (up to 160 characters): break inside words and cap it at
 * three lines. The full name stays in the DOM (the link text), so screen readers and search read it whole.
 */
.vt-results .c-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Pagination: Anterior, a short window of page numbers, Siguiente. Every control is a 48 px target. */
.vt-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--md-space-3);
  margin-block-start: var(--md-space-6);
}

.vt-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--md-space-2);
}

.vt-pagination__link {
  justify-content: center;
  min-inline-size: var(--md-target);
}

.vt-pagination__gap {
  min-inline-size: var(--md-space-5);
  text-align: center;
  color: var(--md-color-ink-soft);
}

/* On a phone the page numbers drop below the two step buttons, which stay side by side. */
@media (max-width: 39.99em) {
  .vt-pagination__pages {
    order: 3;
    inline-size: 100%;
  }

  .vt-pagination__step {
    flex: 1;
  }
}