/* Inspiration page — the braid-style article form (a content grid in the main
   column, a "Refine your search" pill rail on the right) plus the per-tile
   chrome. The two-column shell + sidebar pills reuse the shared
   `.braid-styles` / `.braid-styles-side` rules from main.css (so the page reads
   as the same design language as the braid-style article); this file owns the
   content-type filter, the dual pills and the grid tiles. The grid layout/skin
   itself lives in media-tile-grid.css (pulled in via the asset dependency); the
   per-photo lightbox runtime comes from LightGalleryAsset. */

.inspiration {
  padding-bottom: 48px;
}

/* The main column already column-flexes via `.braid-styles__main`; only its
   own spacing below the head is owned here. The opacity transition softens the
   hash bridge's swap (it dims the column while a style's grid is fetched). */
.inspiration__main {
  min-width: 0;
  transition: opacity 0.15s ease;
}

/* The "All styles" reset pill is hidden until a braid style is active (the hash
   bridge toggles it). `[hidden]` alone loses to the facet item's `inline-flex`
   from the shared rail rules, so hide it explicitly. */
.inspiration__side .braid-styles-side__facet-item[hidden] {
  display: none;
}

/* ---- Head row: heading + content-type filter --------------------------- */

.inspiration__head {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0 0 24px;
}

.inspiration__title {
  margin: 0;
}

/* The content-type filter: coloured pills, one per content kind on the page,
   plus an "All" reset. Each pill carries its kind's colour in `--type-color`;
   inactive pills outline in that colour, the active one fills with it. */
.inspiration__type-filter {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.inspiration__filter-type {
  --type-color: #5e6068;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border: 1px solid var(--type-color);
  border-radius: 999px;
  background: #fff;
  color: var(--type-color);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.inspiration__filter-type:hover {
  background: var(--type-color);
  color: #fff;
}

.inspiration__filter-type.is-active {
  background: var(--type-color);
  border-color: var(--type-color);
  color: #fff;
}

/* Per-kind colours — shared by the filter pills (border/fill via --type-color)
   and the tile corner pills below. */
.inspiration__filter-type--course {
  --type-color: #1bc5bd;
}

.inspiration__filter-type--product {
  --type-color: #8850f2;
}

.inspiration__filter-type--article {
  --type-color: #e106a4;
}

.inspiration__filter-type--photo {
  --type-color: #e8852f;
}

.inspiration__filter-type--video {
  --type-color: #2d80c4;
}

/* ---- Tiles: media fill + overlays -------------------------------------- */

/* The tile body fills the grid frame and anchors the pill / caption overlays.
   (MediaTileGrid's own `frame > img/iframe` rules don't apply here because the
   media is nested inside `.inspiration__tile`, so fill it explicitly.) */
.inspiration__tile {
  position: absolute;
  inset: 0;
}

/* The clickable content of a cover / text card fills the whole tile; the pills
   sit above it as a separate overlay, so the braid-style link is never nested
   inside the content link. */
.inspiration__content-link,
.inspiration__lightbox,
.inspiration__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.inspiration__media {
  cursor: zoom-in;
}

.inspiration__cover,
.inspiration__media img,
.inspiration__tile--video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  /* Match the grid item's 8px rounded clip so the media's own corners coincide
     with it — a square fill bleeds the item's black background through as a dark
     sliver at the rounded corners. */
  border-radius: 8px;
}

/* A cover card subtly lifts on hover to read as clickable. */
.inspiration__tile--card .inspiration__cover {
  transition: transform 0.3s ease;
}

.inspiration__tile--card:hover .inspiration__cover {
  transform: scale(1.04);
}

/* A product's catalog image is a square package shot, so its tile is portrait
   (see ProductContentSource): frame it like the article text card — a bordered
   white card — and letterbox the square on the white field (contained, never
   cropped) rather than filling the frame. The hover lift is dropped too, since
   scaling a contained image would crop its edges against the tile's clip. */
.inspiration__tile[data-content-type='product'] {
  background: #fff;
  border: 1px solid #e3e4e8;
  border-radius: 8px;
}

.inspiration__tile[data-content-type='product'] .inspiration__cover {
  object-fit: contain;
  background: #fff;
}

.inspiration__tile--card[data-content-type='product']:hover .inspiration__cover {
  transform: none;
}

/* Extra photo versions only feed the lightbox — keep them out of the layout
   and out of reach, but still in the DOM for lightGallery to read. */
.inspiration__alt {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Article text tiles: blank container, centred title + announce ------ */

.inspiration__tile--text {
  background: #fff;
  border: 1px solid #e3e4e8;
  border-radius: 8px;
}

.inspiration__tile--text .inspiration__content-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 20px;
  color: #272639;
  text-align: center;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.inspiration__tile--text:hover .inspiration__content-link {
  background: #f7f7f9;
}

.inspiration__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 94%;
}

/* Title + announce opt into the shared pure-CSS trailing-edge fade via the
   `text-fade-clamp` class (clip to --fade-lines + dissolve the last row, no "…",
   no JS — see main.css "Fade-out truncation"). The title stays centred; the
   announce is left-aligned so the cut lands at the box's right edge where the
   fade hides it. */
.inspiration__text-title {
  --fade-lines: 3;
  margin: 0;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: #1d1929;
}

.inspiration__text-announce {
  --fade-lines: 4;
  margin: 0;
  text-align: left;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #6b6a7b;
}

/* ---- Dual pill row: braid style + content type, top-right -------------- */

.inspiration__pills {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: calc(100% - 16px);
}

/* Both pills share one shape; only the colour differs. */
.inspiration__pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(20, 18, 30, 0.72);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: right;
  white-space: nowrap;
}

/* The braid-style pill: neutral dark; brand-tinted hover when it links to the
   style's article. */
.inspiration__pill--style {
  background: rgba(20, 18, 30, 0.72);
}

.inspiration__pill--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.inspiration__pill--link:hover,
.inspiration__pill--link:focus {
  background: rgba(225, 6, 164, 0.92);
  color: #fff;
}

/* The content-type pill: colour-keyed per kind, matching the filter pills. */
.inspiration__pill--course {
  background: rgba(27, 197, 189, 0.92);
}

.inspiration__pill--product {
  background: rgba(136, 80, 242, 0.92);
}

.inspiration__pill--article {
  background: rgba(225, 6, 164, 0.92);
}

.inspiration__pill--photo {
  background: rgba(232, 133, 47, 0.95);
}

.inspiration__pill--video {
  background: rgba(45, 128, 196, 0.95);
}

/* Video tiles carry YouTube's own top gradient (clip title + channel) in the
   same corner — drop the pill row below it so the two don't overlap. */
.inspiration__tile--video .inspiration__pills {
  top: 48px;
}

/* ---- Name caption: bottom box, translucent white ----------------------- */

/* Mirrors the course / braid-style detail cover: a bold dark title at the
   bottom-left, kept legible by a translucent white box. On a photo the click
   target is the lightbox anchor, so the caption lets clicks through. */
.inspiration__caption {
  position: absolute;
  left: 10px;
  right: auto;
  bottom: 10px;
  max-width: calc(100% - 20px);
  z-index: 1;
  margin: 0;
  padding: 6px 10px;
  color: #272639;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  pointer-events: none;
}

/* lightGallery drops each photo's `data-sub-html` into a `.lg-sub-html` strip;
   for the inspiration gallery only (tagged `.lg-inspiration`) restyle it into
   the same dark-on-translucent-white box as the grid tile. */
.lg-inspiration .lg-sub-html {
  width: fit-content;
  max-width: min(90%, 640px);
  margin-left: auto;
  margin-right: auto;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #272639;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

/* ---- Multi-image tile: swipeable photo track + dot pagination ---------- */

/* The track is a Swiper (fade effect, see inspiration.js): the photos can be
   swiped/dragged through in place, and Swiper owns the cross-fade and the dot
   pagination. It fills the tile; Swiper's own stylesheet supplies the clip and
   the flex track, so with JS off only the first photo shows. */
.inspiration__slides {
  position: absolute;
  inset: 0;
}

.inspiration__slides .swiper-slide {
  height: 100%;
}

.inspiration__slide {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Bottom stack inside the lightbox anchor — the name caption sits above the
   dots. Clicks fall through (so the image/name still open the lightbox); the
   dots re-enable pointer events for themselves. */
.inspiration__overlay-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.inspiration__overlay-bottom .inspiration__caption {
  position: static;
  align-self: flex-start;
  max-width: calc(100% - 20px);
  margin: 0 10px;
  padding: 6px 10px;
}

/* Pill pagination mirroring the homepage top slider: short inactive bars and a
   longer active bar. */
.inspiration__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 12px;
  pointer-events: auto;
}

.inspiration__dot {
  width: 16px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background-color: #d4d4d8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}

.inspiration__dot--active {
  width: 32px;
  background-color: #e106a4;
}

/* The photo track's cross-fade is Swiper's (inline transition durations), so it
   is silenced in JS rather than here — see the `speed` option in
   inspiration.js. */
@media (prefers-reduced-motion: reduce) {
  .inspiration__tile--card .inspiration__cover,
  .inspiration__dot {
    transition: none;
  }
}

/* ---- Empty state ------------------------------------------------------- */

.inspiration__empty {
  margin: 24px 0;
  color: #6b6a7b;
  font-size: 1rem;
}

/* ---- Pagination -------------------------------------------------------- */

/* Centre the numbered pager on the page (the inline-block page links centre
   within their full-width row); the shared `.pagination` defaults to the
   left-aligned catalog layout. */
.inspiration .pagination ul {
  text-align: center;
}

@media (max-width: 575px) {
  .inspiration__filter-type {
    padding: 6px 13px;
    font-size: 0.8rem;
  }

  /* Phone: stop the quilt packer from mixing orientations into one row (which
     crushes a portrait beside a landscape into a sliver). Flip the shared grid
     into its mobile mode — the grid JS reads this flag and re-groups; the
     breakpoint is owned here (the consumer), so the generic widget stays
     width-agnostic. */
  .inspiration .media-tile-grid {
    --tile-quilt-mobile: 1;
  }
}