/* 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. Applies to both copies of
   the rail — the desktop one and the phone curtain's. */
.inspiration__side .braid-styles-side__facet-item[hidden] {
  display: none;
}

/* ---- Phone: the facets fold into the shared filter curtain -------------- */

/* On a phone the rail is not a rail — stacked above the heading it was ~1800px
   of pills to scroll past before the first tile (client, 2026-07). Below 800px
   it leaves the page and the pills live in the shared off-canvas curtain
   (`.mobile-filter`, the one the course catalogue and the free-tutorials page
   use), opened by the "Refine your search" button in the bottom bar. The curtain
   is parked off-canvas at every width, so above 800 the rail is simply the only
   copy on screen and nothing here needs undoing.

   The curtain packs its children at their natural width (align-items:flex-start),
   so stretch the heading + pill list to fill it, and leave room at the foot for
   the bottom bar the curtain paints over. */
.inspiration__side--sheet > * {
  width: 100%;
}

.inspiration__side--sheet {
  padding-bottom: 96px;
}

/* Parked off-canvas the curtain is still rendered, and its box shadow bled a
   faint strip down the left edge of the desktop page. It can never open above
   1024px — the button that opens it is hidden there (>1024 since the 2026-08
   tablet pass; the bar used to be phone-only) — so take it out of the render
   instead. */
@media (min-width: 1025px) {
  .inspiration__side--sheet {
    display: none;
  }
}

/* The bar itself is the shared `.sticky-action-bar` (hidden above 1024px, and
   already covered by the site-wide footer offset that keeps the last footer
   lines clear of a bottom bar); only the button geometry differs — one
   full-width rose CTA rather than a price + CTA pair. */
.inspiration__refine-bar .mobile-filter-btn {
  margin: 0;
}

@media (max-width: 799px) {
  .inspiration__side--rail {
    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;
}

/* The 48px top padding reserves the band the absolutely-positioned pill row
   occupies (the same drop the video tiles use), so a long title can never run
   under the pills; flex keeps the text centred in the space below it. The side
   padding is the card's own gutter and nothing more — a text card has no
   graphics, so its copy is the tile, and the client wants it running the full
   card width (2026-08) rather than sitting in a narrow inset column. */
.inspiration__tile--text .inspiration__content-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 48px 14px 18px;
  color: #272639;
  text-align: center;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

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

/* Full width of the padded box — no extra cap; the gutter above is the only
   inset the title and announce get. */
.inspiration__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* 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;
}

/* A product card is a white bordered plate holding a letterboxed package shot
   (see above), so its name reads as the plate's own footer line rather than as
   an overlay burnt into a photo — and the 10px that reads as a hairline inset
   over a full-bleed image glues the name to the plate's edge. Drop it lower in
   the white band instead (client, 2026-08: the circled tile wanted this gap,
   not a price line). Width is left alone: narrowing the box would cost the
   name a line and push it back up over the package shot. */
.inspiration__tile[data-content-type='product'] .inspiration__caption {
  bottom: 18px;
}

/* 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;
}

/* Phone: the sticky "Refine your search" bar rides at z-index 2500 — above
   lightGallery's stock 1050 outer / 1040 backdrop — so it painted over the
   open lightbox. Lift the inspiration gallery above the bar; the shared
   lightGallery.css stays untouched. The backdrop is appended without the
   gallery's custom class, so inspiration.js flags <body> while this gallery
   is open and the backdrop override scopes to that flag. */
.lg-outer.lg-inspiration {
  z-index: 2600;
}

body.lg-inspiration-open .lg-backdrop {
  z-index: 2590;
}

/* An open gallery must freeze the page under it: lightGallery ships no scroll
   lock, so a swipe that missed the photo scrolled the grid behind the backdrop
   and the page came back somewhere else on close. `overflow: hidden` alone is
   not enough on iOS Safari, so the body is also taken out of flow at a
   negative offset (inspiration.js stamps `--lg-scroll-y` with the frozen
   scrollTop and pads the gutter the vanished scrollbar leaves behind); the
   same JS scrolls back to it on close, so the position is never lost. */
body.lg-inspiration-open {
  position: fixed;
  top: calc(var(--lg-scroll-y, 0px) * -1);
  left: 0;
  right: 0;
  overflow: hidden;
}

/* ---- 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: 799px) {
  /* The 24px above the pager reads right; below it that same 24px landed on top
     of the page block's 48px bottom padding, so the gap under the pager was
     three times the one over it (client, 2026-07). Drop the pager's own bottom
     margin and cut the block's padding to the one figure, so the two match. */
  .inspiration .pagination {
    margin-bottom: 0;
  }

  .inspiration {
    padding-bottom: 24px;
  }
}

@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;
  }
}