/*
 * patterns/business-directory.css — "Business Directory"
 * Markup: wp-content/themes/fcs/patterns/business-directory.php (the section
 *         and its header)
 *         wp-content/plugins/fcs-core/src/blocks/business-directory/render.php
 *         (the categories, cards and pop-up)
 * Root:   .fcs-business-directory
 *
 * Figma 10396:8466, desktop only: a centred header, then one block per Sponsor
 * Category — H3, a 1px rule and a four-slot grid of business cards. Each card
 * opens one shared <dialog>; the dialog is rendered inside the root, so it is
 * styled from here even though the browser paints it in the top layer. The
 * pop-up is Figma's Modal, 10476:9626.
 *
 * DERIVED — there is no mobile or tablet design.
 *
 *   Cards
 *     Small   a Splide slider per category (assets/js/business-directory.js),
 *             one card with the next peeking in. Without JS: one column.
 *     Medium  2 columns, 32px gaps — matches Multicolumn's 2×2 on tablet.
 *     Large   4 columns, 32px gaps — Figma: 4 × 286px in the 1240px column. A
 *             short row leaves its slots empty; a fifth card wraps.
 *
 *   Pop-up
 *     Small   20px from each viewport edge, 20px padding, 20px under close.
 *     Medium+ 626px wide, 28px padding, 40px under close — Figma's.
 *     All     never taller than the viewport less 40px; the panel scrolls.
 *
 * WHY THE DOUBLED CLASSES ON THE HEADER RULES
 * -------------------------------------------
 * The header groups are flow containers, and core's global styles give their
 * children `:root :where( .is-layout-flow ) > * { margin-block-start: 24px }`,
 * which is (0,1,0) and printed after the theme's stylesheets. A single class
 * ties and loses; a repeated one is (0,2,0) and wins without !important — the
 * same idiom as patterns/multicolumn.css. The block's own markup is not a
 * layout container, so its rules are scoped under the root instead.
 */

/* Section ------------------------------------------------------------- */

/*
 * Section padding is NOT declared here for Medium and Large — the editor owns
 * those from the sidebar's Dimensions panel. Small is pinned in
 * layout/spacing.css. See CLAUDE.md § "Section padding".
 *
 * overflow: hidden catches the mobile slider's next card, which peeks past the
 * track on purpose (see Slider below).
 */
.fcs-business-directory {
  overflow: hidden;
}

/* Header, then 40px down to the first category. */
.fcs-business-directory__inner.fcs-business-directory__inner > * {
  margin-block: 0;
}

.fcs-business-directory__inner.fcs-business-directory__inner > * + * {
  margin-block-start: 40px;
}

/* Header -------------------------------------------------------------- */

/*
 * Figma: H2 → 20px → intro, all centred. The intro is two paragraphs with a
 * blank 24px line between them, drawn 856px wide — so the measure is on the
 * paragraphs, not the header, and the H2 keeps the full width.
 *
 * The "complete this form" link keeps the site's prose underline even though
 * Figma draws it bare: it sits inside a sentence, and colour alone is not
 * enough to tell a link from the copy around it.
 */
.fcs-business-directory__header {
  text-align: center;
}

.fcs-business-directory__header.fcs-business-directory__header > * {
  margin-block: 0;
}

.fcs-business-directory__header.fcs-business-directory__header > * + * {
  margin-block-start: 20px;
}

.fcs-business-directory__header.fcs-business-directory__header > .fcs-business-directory__info + .fcs-business-directory__info {
  margin-block-start: 24px;
}

.fcs-business-directory__info {
  max-width: 856px;
  margin-inline: auto;
}

/* Categories ---------------------------------------------------------- */

/* 40px between categories. */
.fcs-business-directory .fcs-business-directory__block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Figma: title → 24px → rule → 24px → cards. */
.fcs-business-directory .fcs-business-directory__category {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.fcs-business-directory .fcs-business-directory__category > * {
  margin: 0;
}

/*
 * Figma's rule is a 1px #d1d6db fill; `stroke` (#d3d7de) is the palette's
 * match. Drawn as a background so no browser hr border or inset shows.
 */
.fcs-business-directory hr.fcs-business-directory__rule {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--wp--preset--color--stroke);
  opacity: 1;
}

.fcs-business-directory .fcs-business-directory__empty {
  margin: 0;
  color: var(--wp--preset--color--muted);
  text-align: center;
}

/* Grid ---------------------------------------------------------------- */

/*
 * The cards wrapper is the slider root on Small; on its own it is just a box.
 * min-width: 0 lets it shrink inside the category's flex column.
 */
.fcs-business-directory .fcs-business-directory__cards {
  min-width: 0;
}

/* (0,2,1) to beat the prose list indent in base/typography.css. */
.fcs-business-directory ul.fcs-business-directory__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .fcs-business-directory ul.fcs-business-directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fcs-business-directory ul.fcs-business-directory__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fcs-business-directory .fcs-business-directory__item {
  margin: 0;
}

/* Card ---------------------------------------------------------------- */

/*
 * Every control in here is a <button> styled as something else. Browsers give
 * buttons their own font, colour, padding and border; none of that is in the
 * design.
 */
.fcs-business-directory .fcs-business-directory__trigger,
.fcs-business-directory .fcs-business-directory__close {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}

/*
 * The whole card is one button, so the image and name are a single tab stop
 * and a single accessible name. Figma: image → 12px → name.
 */
.fcs-business-directory .fcs-business-directory__trigger {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
}

/*
 * 286 × 206 with the site's standard 12px radius (Figma draws it square; the
 * radius was asked for to match the other cards). The surface-alt fill is
 * Figma's placeholder tile (#e5edf7; surface-alt is the palette's match), so a
 * sponsor with no image yet still gets the tile. overflow: hidden clips the
 * image — and its hover zoom — to the rounded corners.
 */
.fcs-business-directory .fcs-business-directory__media {
  display: block;
  aspect-ratio: 286 / 206;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--wp--preset--color--surface-alt);
}

.fcs-business-directory .fcs-business-directory__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fcs-transition);
}

/*
 * Figma: 16/24, body font, bold, link blue.
 *
 * align-self: flex-start sizes the name to its words rather than the card's
 * width, so the hover bar below runs under the name only — the trigger is a
 * flex column, which would otherwise stretch it.
 */
.fcs-business-directory .fcs-business-directory__name {
  position: relative;
  align-self: flex-start;
  color: var(--wp--preset--color--link);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  line-height: 1.5;
  transition: color var(--fcs-transition);
}

/*
 * Hover — the site's standard sweep: the same bar, tokens and motion as
 * .fcs-link--animated in components/links.css, entering from the left and
 * leaving to the right.
 *
 * Restated rather than adding that class to the name, because the class
 * animates on hover of the element itself. Here the whole card is the button,
 * so hovering the image has to sweep the name too — the trigger's :hover
 * drives it.
 */
.fcs-business-directory .fcs-business-directory__name::after {
  content: "";
  position: absolute;
  inset: auto 0 calc(var(--fcs-underline-gap) * -1) 0;
  height: var(--fcs-underline-size);
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--fcs-sweep-link);
}

.fcs-business-directory .fcs-business-directory__trigger:hover .fcs-business-directory__name,
.fcs-business-directory .fcs-business-directory__trigger:focus-visible .fcs-business-directory__name {
  color: var(--wp--preset--color--primary);
}

.fcs-business-directory .fcs-business-directory__trigger:hover .fcs-business-directory__name::after,
.fcs-business-directory .fcs-business-directory__trigger:focus-visible .fcs-business-directory__name::after {
  transform: scaleX(1);
  transform-origin: left;
}

.fcs-business-directory .fcs-business-directory__trigger:hover .fcs-business-directory__image {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .fcs-business-directory .fcs-business-directory__image {
    transition: none;
  }

  .fcs-business-directory .fcs-business-directory__trigger:hover .fcs-business-directory__image {
    transform: none;
  }
}

/* Slider (Small only) -------------------------------------------------- */

/*
 * Everything here is scoped to .is-active, the class Splide puts on the cards
 * wrapper once mounted, so the un-mounted grid (no JS, the editor canvas,
 * Medium and up) is untouched. Mirrors patterns/latest-news.css, which wraps a
 * <ul> the same way.
 *
 * The track stays overflow: visible so the next card peeks past it — the peek
 * is the swipe affordance; there are no arrows. The section clips it instead.
 */
.fcs-business-directory .fcs-business-directory__cards.is-active .splide__track {
  overflow: visible;
}

/*
 * The grid rule above is (0,2,1); this is (0,3,1), so the mounted list becomes
 * the single non-wrapping row Splide translates. Splide spaces the slides with
 * its own inline margin, so the grid gap goes.
 */
.fcs-business-directory__cards.is-active ul.fcs-business-directory__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
}

/* Splide sets each slide's width inline; this stops flex shrinking it. */
.fcs-business-directory__cards.is-active .fcs-business-directory__item {
  flex: 0 0 auto;
}

/*
 * Pagination dots — Multicolumn's, in the link blue Figma uses on light bands.
 * The list and item resets undo the post-content list styling it lands in.
 */
.fcs-business-directory .splide__pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  width: 100%;
  margin: 0;
  margin-block-start: var(--wp--preset--spacing--30);
  padding: 0;
  list-style: none;
}

.fcs-business-directory .splide__pagination li {
  margin: 0;
}

.fcs-business-directory .splide__pagination__page {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--link);
  border-radius: var(--wp--preset--border-radius--pill);
  background: transparent;
  opacity: 0.6;
  transition:
    background-color var(--fcs-transition),
    opacity var(--fcs-transition);
}

.fcs-business-directory .splide__pagination__page.is-active {
  background: var(--wp--preset--color--link);
  opacity: 1;
}

/* Pop-up -------------------------------------------------------------- */

/*
 * Figma: Modal, 10476:9626. The <dialog> is a bare box and the white panel
 * inside fills it exactly, so a click that lands on the dialog element itself
 * can only be on the backdrop — which is how view.js closes on an outside
 * click.
 *
 * Inside: close → 40px → image → 20px → details (name, address, phone,
 * website, description; 10px apart) → 20px → socials.
 */
.fcs-business-directory .fcs-business-directory__dialog {
  width: calc(100vw - 40px);
  max-width: 626px;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--foreground);
  overflow: visible;
}

.fcs-business-directory .fcs-business-directory__dialog::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

/* Small: 20px padding and gap (derived); Medium+: Figma's 28px and 40px. */
.fcs-business-directory .fcs-business-directory__dialog-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100dvh - 40px);
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
  background-color: var(--wp--preset--color--background);
  box-shadow: var(--fcs-shadow-lg);
  text-align: left;
}

@media (min-width: 768px) {
  .fcs-business-directory .fcs-business-directory__dialog-panel {
    gap: 40px;
    padding: 28px;
  }
}

/*
 * Close — a 24px glyph in a 44px hit area. The negative margin gives back the
 * extra 10px on each side, so the glyph sits flush with the panel padding.
 */
.fcs-business-directory .fcs-business-directory__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin: -10px;
  padding: 10px;
  color: var(--wp--preset--color--link);
}

.fcs-business-directory .fcs-business-directory__close svg {
  display: block;
  width: 24px;
  height: 24px;
}

.fcs-business-directory .fcs-business-directory__dialog-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fcs-business-directory .fcs-business-directory__dialog-body > * {
  margin: 0;
}

/* Figma: 570 × 470, 12px radius. */
.fcs-business-directory .fcs-business-directory__modal-media {
  aspect-ratio: 570 / 470;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--wp--preset--color--surface-alt);
}

.fcs-business-directory .fcs-business-directory__modal-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Details: 16/24 body copy, 10px apart. */
.fcs-business-directory .fcs-business-directory__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.fcs-business-directory .fcs-business-directory__details > *,
.fcs-business-directory .fcs-business-directory__description > * {
  margin: 0;
}

.fcs-business-directory .fcs-business-directory__description > * + * {
  margin-block-start: 10px;
}

/*
 * The name is the dialog's <h2> (its accessible name) but drawn at Figma's H5
 * (18/28, body font, bold) — the same presets theme.json gives h5. The slug is
 * h5, so the variable is --font-size--h-5.
 */
.fcs-business-directory .fcs-business-directory__modal-name {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--h-5);
  font-weight: 700;
  line-height: 1.556;
  letter-spacing: -0.2px;
  color: inherit;
}

/*
 * Links — the phone and "Visit Website" are deliberately unstyled here. The
 * block renders inside post content, so components/links.css gives them the
 * site's standard link: the link colour and the underline that sweeps away on
 * hover. Do not restyle them: a hover text-decoration shows up as a second
 * underline as the bar leaves, and an opt-out breaks the site-wide idiom.
 */

/*
 * Socials: bare link-blue glyphs in a row, no gaps. Figma's slot is a 20px
 * glyph in 8px padding (36px). The theme icons are a 36px canvas with a
 * ~17.6px glyph, so they are drawn at 40px to bring the glyph to ~20px — a
 * 40px slot, close to Figma's and a better touch target. The row is pulled
 * back by the canvas's inner margin so the first glyph lines up with the copy.
 */
.fcs-business-directory ul.fcs-business-directory__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 0 0 -2px;
  padding: 0;
  list-style: none;
}

.fcs-business-directory .fcs-business-directory__socials li {
  margin: 0;
}

.fcs-business-directory .fcs-business-directory__social {
  display: block;
  color: var(--wp--preset--color--link);
  transition: color var(--fcs-transition);
}

.fcs-business-directory .fcs-business-directory__social:hover,
.fcs-business-directory .fcs-business-directory__social:focus-visible {
  color: var(--wp--preset--color--primary);
}

.fcs-business-directory .fcs-business-directory__social svg {
  display: block;
  width: 40px;
  height: 40px;
}

/*
 * The icon files carry their own fill (blue or yellow); painting them with
 * currentcolor lets these rules choose the colour instead.
 */
.fcs-business-directory .fcs-business-directory__social svg path {
  fill: currentcolor;
}