/* PIE CPT Showcase — frontend styles */

.pie-showcase {
  /* display: flex !important;
  flex-direction: column !important; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 24px;
  row-gap: 24px;
  /*
   * Colors & font default to the active theme's design tokens
   * (WordPress block-theme presets), with the original hardcoded values kept
   * as fallbacks so the plugin still renders standalone under a theme that
   * doesn't expose these variables.
   */
  --pcs-primary: var(--wp--preset--color--accent-1, #3d3a6e);
  --pcs-accent: var(--wp--preset--color--accent-3, #a08c5b);
  --pcs-radius: 8px;
  --pcs-gap: 24px;
  --pcs-text: var(--wp--preset--color--contrast, #2b2a3a);
  /* "Contrast" / "Contrast Two" theme palette slots — kept as their own
     aliases (rather than reusing --pcs-text) since a theme's "Contrast Two"
     is typically a distinct swatch, not just --pcs-text's fallback again. */
  --pcs-contrast: var(--wp--preset--color--contrast, #2b2a3a);
  --pcs-contrast-2: var(--wp--preset--color--contrast-2, #3d3a6e);
  --pcs-muted: var(--wp--preset--color--accent-4, #6b6a7a);
  /* Excerpt color (.pie-showcase__excerpt below) — same muted-gray fallback as
     --pcs-muted since this theme's own "Accent 5" isn't known here. */
  --pcs-accent-5: var(--wp--preset--color--accent-5, #6b6a7a);
  --pcs-border: var(--wp--preset--color--accent-6, #e4e2ee);
  --pcs-surface: var(--wp--preset--color--base, #ffffff);

  /*
   * Event state colours, shared by the date cards (`.pie-showcase__item.is-*`)
   * and the calendar's day cells: grey once an event has finished, purple while
   * it's still ahead, dark purple on the day it's actually running.
   */
  --pcs-status-past: var(--wp--preset--color--accent-4, #5a6169);
  --pcs-status-upcoming: var(--wp--preset--color--accent-2, #896ccc);
  --pcs-status-current: var(--wp--preset--color--accent-1, #403b6a);

  color: var(--pcs-text);
  font-family: var(--wp--preset--font-family--sukhumvit-set, inherit);
  /*
   * Base font-size for the whole instance — every element below that doesn't
   * set its own `--wp--preset--font-size--*` (with its own px fallback)
   * inherits this. Tries the theme's "medium" preset (WordPress core's
   * default font-size slug, kept even by most block themes that don't
   * redefine their type scale) before falling back to a plain 16px when a
   * theme exposes no such token at all.
   */
  font-size: var(--wp--preset--font-size--sm, 14px);
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

.pie-showcase *,
.pie-showcase *::before,
.pie-showcase *::after {
  box-sizing: inherit;
}

.pie-showcase__icon {
  width: 2em;
  height: 2em;
  display: none;
  vertical-align: -0.15em;
  padding-right: 10px;
}

.pie-showcase__icon.shear {
  color: var(--pcs-accent);
}

/* Showcase heading (optional "title" attribute, rendered top-left) */
.pie-showcase__heading {
  margin: 0 0 var(--pcs-gap);
  font-size: var(--wp--preset--font-size--l, 22px);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  color: var(--pcs-primary);
}

/* Toolbar */
.pie-showcase__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.pie-showcase__orderby-form {
  display: flex;
  align-items: center;
}

.pie-showcase__orderby-select {
  border: 1px solid var(--pcs-border);
  border-radius: calc(var(--pcs-radius) / 2);
  padding: 6px 10px;
  color: var(--pcs-text);
  background: var(--pcs-surface);
}

.pie-showcase__layout-switcher {
  display: inline-flex;
  border: 1px solid var(--pcs-border);
  border-radius: calc(var(--pcs-radius) / 2);
  overflow: hidden;
}

.pie-showcase__layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  color: var(--pcs-muted);
  text-decoration: none;
  background: var(--pcs-surface);
  border-right: 1px solid var(--pcs-border);
}

.pie-showcase__layout-btn:last-child {
  border-right: none;
}

.pie-showcase__layout-btn:hover {
  color: var(--pcs-primary);
}

.pie-showcase__layout-btn.is-active {
  color: #fff;
  background: var(--pcs-primary);
}

/* Filter bar (see templates/filter-bar.php): a fields grid on the left —
   search spanning both columns on its own row, taxonomy + date range filling
   the row below — and the submit/reset buttons stacked in their own column
   on the right. Below 900px there's no longer room for that button column
   beside the grid, so it drops to its own full-width row underneath (see the
   @media (max-width: 900px) block below). */
.pie-showcase__filter-bar {
  margin-bottom: var(--pcs-gap);
  width: 100%;
}
.pie-showcase__filter-taxonomy--dropdown {
  display: none;
}

.pie-showcase__filter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--wp--preset--font-size--sm, 14px);
}

.pie-showcase__filter-grid {
  flex: 1 1 320px;
  /* Without this a grid item's automatic min-width is its content's min-content
     size, which blocks the "auto" columns below from ever actually shrinking —
     that's what let row 2 (taxonomy + dates) overflow past its flex-basis and
     visually overlap .pie-showcase__filter-buttons instead of wrapping. */
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
  padding: 10px;
}

@media (max-width: 600px) {
  .pie-showcase__filter-grid {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}

/* Between full desktop width and the 600px single-column collapse below, the
   submit/reset column's own min-width (from .pie-showcase__submit /
   .pie-showcase__reset) can't shrink any further, so it's what was left
   squeezing row 2 into overlap. Give it the whole line to itself first —
   .pie-showcase__filter-top already wraps, so a 100% flex-basis on the grid
   is enough to push the buttons onto their own row below it. */
@media (max-width: 900px) {
  .pie-showcase__filter-grid {
    flex-basis: 100%;
  }

  .pie-showcase__filter-buttons {
    flex-direction: row;
    width: 100%;
  }

  .pie-showcase__filter-buttons > * {
    flex: 1 1 auto;
  }
}

.pie-showcase__filter-grid .pie-showcase__filter-search {
  grid-area: 1 / 1 / span 1 / span 2;
}

@media (max-width: 600px) {
  .pie-showcase__filter-grid .pie-showcase__filter-search {
    grid-area: auto;
  }
}

/* With fields contributed through `pie_cpts_filter_bar_extra_fields` the fixed
   2x2 grid above has no cell left (auto-flow would push the third field up into
   a new column beside the search box), so those instances switch to a wrapping
   row instead — search still on its own line, the rest sharing the line below.
   Scoped to the --extra modifier so instances without extra fields keep the
   grid exactly as it was. */
.pie-showcase__filter-grid--extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.pie-showcase__filter-grid--extra > * {
  flex: 1 1 200px;
  min-width: 0;
}

.pie-showcase__filter-grid--extra .pie-showcase__filter-search {
  flex-basis: 100%;
}

/* The date range needs more room than a generic 200px field — two bordered
   icon+input pairs plus the separator — so it gets its own larger basis
   here rather than sharing the 200px one every other --extra field uses.
   Without this it was squeezed down to 200px and had to wrap its own two
   inputs onto separate lines to avoid overflowing. */
.pie-showcase__filter-grid--extra .pie-showcase__filter-dates {
  flex: 1 1 320px;
}

.pie-showcase__filter-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.pie-showcase__filter-search {
  position: relative;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
}

.pie-showcase__filter-search .pie-showcase__icon {
  display: block;
  position: absolute;
  left: 14px;
  width: 1.2em;
  height: 1.2em;
  color: var(--pcs-muted);
}

.pie-showcase__filter-search input[type="text"] {
  width: 100%;
  padding: 11px 16px 11px 40px;
  border: 1px solid var(--pcs-border);
  border-radius: var(--pcs-radius);
  font-size: var(--wp--preset--font-size--sm, 14px);
}
.pie-showcase__filter-search :focus {
  outline: none;
}
.pie-showcase__filter-search :focus-visible {
  outline: none;
}

.pie-showcase__filter-search input[type="text"]::placeholder {
  color: var(--pcs-muted);
}
.pie-showcase__filter-search svg {
  font-size: 30px;
}

/* Date range (วันที่เริ่มต้น – วันที่สิ้นสุด) — each end is its own bordered
   field (icon + input, no separate outer border on the input itself) rather
   than two bare inputs sharing one dash, matching the search field's style. */
.pie-showcase__filter-dates {
  display: flex;
  /* No flex-wrap here on purpose — the two ends of the range must stay on one
     line (see the --extra basis override above and the 600px/900px
     breakpoints below for how the *surrounding* layout makes room instead). */
  align-items: center;
  gap: 6px;
  font-size: var(--wp--preset--font-size--sm, 14px);
  /* Grid item of .pie-showcase__filter-grid's minmax(0, 1fr) column — without
     this its automatic min-width (content size) would still block the track
     from shrinking, same reasoning as the grid rule above. */
  min-width: 0;
}

.pie-showcase__filter-date {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 11px 14px 11px 38px;
  border: 1px solid var(--pcs-border);
  border-radius: var(--pcs-radius);
  background: var(--pcs-surface);
}

/* .pie-showcase__filter-date .pie-showcase__icon {
  display: block;
  position: absolute;
  left: 14px;
  width: 1.1em;
  height: 1.1em;
  color: var(--pcs-muted);
} */

/* Each end of the range fills its half of the .pie-showcase__filter-dates
   row (itself one grid cell) rather than sizing to its own content. */
.pie-showcase__filter-grid .pie-showcase__filter-date {
  width: 100%;
}
/* .pie-showcase__filter-date input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
} */

.pie-showcase__filter-date input[type="date"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--pcs-text);
  font-size: var(--wp--preset--font-size--sm, 14px);
  outline: none;
  /* font-size: var(--wp--preset--font-size--xl, 50px); */
}
.pie-showcase__filter-date :focus {
  outline: none;
}
.pie-showcase__filter-date :focus-visible {
  outline: none;
}
/* .pie-showcase__filter-date svg {
  font-size: 30px;
} */

/* Aligns the dash with the fields' text, not their (now removed) top edge. */
.pie-showcase__filter-date-sep {
  color: var(--pcs-muted);
}

@media (max-width: 600px) {
  .pie-showcase__filter-dates {
    flex: 1 1 100%;
  }

  .pie-showcase__filter-date {
    flex: 1;
  }
}

.pie-showcase__filter-taxonomy {
  position: relative;
  /* Grid item of .pie-showcase__filter-grid's minmax(0, 1fr) column — see the
     min-width note on that rule. */
  min-width: 0;
}

.pie-showcase__filter-taxonomy summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 200px;
  padding: 11px 14px;
  border: 1px solid var(--pcs-border);
  border-radius: var(--pcs-radius);
  background: var(--pcs-surface);
  color: var(--pcs-muted);
  cursor: pointer;
  list-style: none;
  /* font-size: var(--wp--preset--font-size--, 14px); */
}

.pie-showcase__filter-taxonomy summary::-webkit-details-marker {
  display: none;
}
.pie-showcase__filter-taxonomy :focus {
  outline: none;
}
.pie-showcase__filter-taxonomy :focus-visible {
  outline: none;
}
/* Rotates to point up while the dropdown is open, mirroring a native <select>. */
.pie-showcase__filter-chevron {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  color: var(--pcs-muted);
  transition: transform 0.15s ease;
}

.pie-showcase__filter-taxonomy[open] .pie-showcase__filter-chevron {
  transform: rotate(180deg);
}

.pie-showcase__filter-count {
  color: var(--pcs-primary);
  font-weight: 600;
}

.pie-showcase__filter-taxonomy-options {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--pcs-surface);
  border: 1px solid var(--pcs-border);
  border-radius: var(--pcs-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* One group per taxonomy inside the shared "หมวดหมู่" dropdown. The heading
   stays even for a single taxonomy: term names can repeat across taxonomies,
   so it is what tells two same-named terms apart. */
.pie-showcase__filter-taxonomy-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pie-showcase__filter-taxonomy-group + .pie-showcase__filter-taxonomy-group {
  padding-top: 10px;
  border-top: 1px solid var(--pcs-border);
}

.pie-showcase__filter-taxonomy-name {
  margin: 0;
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 600;
  color: var(--pcs-muted);
}

.pie-showcase__filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--wp--preset--font-size--xs, 14px);
  cursor: pointer;
}

.pie-showcase__filter-taxonomy-group .pie-showcase__filter-checkbox {
  padding-left: 8px;
}

.pie-showcase__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 150px;
  padding: 11px 22px;
  color: var(--wp--preset--color--contrast-2, #0068c9);
  background: var(--wp--preset--color--base, #ffffff);
  border: 1.5px solid var(--wp--preset--color--contrast-2, #0068c9);
  border-radius: 999px;
  font-size: var(--wp--preset--font-size--sm, 14px);
  /* font-weight: 600; */
  text-decoration: none;
  white-space: nowrap;
}

.pie-showcase__reset:hover {
  /* color: #fff; */
  /* background: var(--pcs-primary); */
  color: var(--wp--preset--color--base, #ffffff);
  background: var(--wp--preset--color--contrast, #003087);
  border-color: var(--wp--preset--color--contrast, #003087);
}

.pie-showcase__submit {
  min-width: 150px;
  padding: 10px 22px;
  color: var(--wp--preset--color--base, #ffffff);
  background: var(--wp--preset--color--contrast-2, #0068c9);
  border: none;
  border-radius: 999px;
  /* font-weight: 600; */
  cursor: pointer;
  font-size: var(--wp--preset--font-size--sm, 14px);
}

.pie-showcase__submit:hover {
  background: var(--wp--preset--color--contrast, #003087);
}

@media (max-width: 767px) {
  .wp-block-easy-tabs-block-tab-buttons[class].has-etb-buttons-scrollable {
    justify-content: center;
  }
  /* 1. ปรับคอนเทนเนอร์หลักให้เรียงต่อกันในแนวตั้ง */
  div#pcs-1df2ce3e46 {
    flex-direction: column !important;
  }

  /* 2. ปรับแถบ Tabs ให้เต็มความกว้างและเปลี่ยนการเรียงปุ่ม (ถ้าจำเป็น) */
  .pie-showcase__tabs {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    flex-direction: row !important; /* เปลี่ยนเป็นแนวนอนเพื่อให้ scroll ซ้าย-ขวาได้ */
    overflow-x: auto; /* เพิ่ม scroll แนวนอนสำหรับเมนูถ้ามีหลายอัน */
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
  }

  /* 3. ปรับเนื้อหา Panel ให้เต็มความกว้าง */
  .pie-showcase__panel.is-active {
    width: 100% !important;
    flex-basis: auto !important;
  }

  /* 4. ปรับส่วนของ Filter Bar (ถ้ามี) */
  .pie-showcase__filter-bar {
    width: 100% !important;
    margin-bottom: 15px;
  }
}

/*
 * Category tabs ("แสดงแท็บหมวดหมู่", `show_tabs`), rendered above the Filter Bar.
 * Every tab's panel is already in the page, so the links only ever show/hide one
 * (assets/js/showcase.js) — they stay real `pcs_tab` URLs so a tab is
 * deep-linkable and still works without JS. Scrolls sideways instead of wrapping
 * when a taxonomy has more terms than fit.
 */
.pie-showcase__tabs {
  border: 1px solid #e5e7eb;
  width: 30%;
  max-width: 250px;
  margin: 0 auto 0px;
  align-items: stretch;
  background: var(--pcs-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 25px;
  padding: 7px 7px;
  height: 100%;
}

.pie-showcase__tabs a {
  justify-content: left;
}

.pie-showcase__tab {
  /* color: var(--wp--preset--color--contrast-3); */
  /* `.pie-showcase__tab` is an `<a>` (inline by default), so `justify-content`
     and `min-width` above did nothing until `display: flex` actually turned it
     into a flex container — this is what makes the label sit centred inside
     the button's min-width box instead of hugging its left edge. */
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 18px;
  color: var(--wp--preset--color--accent-5, #98a2b3);
  font-size: var(--wp--preset--font-size--sm, 14px);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  /* Sits on top of the row's own border, so the active tab's underline replaces
     it rather than doubling up. */
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  /* min-width: 200px; */
  min-height: 40px;
  justify-content: center;
}

.pie-showcase__tab:hover {
  color: var(--pcs-primary);
}

.pie-showcase__tab.is-active {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #003087 0%, #2196f3 100%);
  box-shadow: 0 8px 18px rgba(7, 145, 218, 0.32);
  border-radius: 999px;
  /* color: var(--pcs-primary);
  border-bottom-color: var(--pcs-primary); */
}

.pie-showcase__tab:focus-visible,
.pie-showcase__tab:focus {
  outline: none;
  /* outline-offset: -2px; */
}

/*
 * One panel per tab, all rendered on the first page load; the inactive ones are
 * marked `hidden`. Declared explicitly rather than relying on the attribute's
 * UA default, which a theme's `display` rule on a generic div selector would
 * otherwise beat. Each panel also carries `.pie-showcase--{tab}` (see
 * PIE_CPTS_Shortcode::tab_css_class()) for per-tab Custom CSS, and its own
 * `.pie-showcase--{layout}` class — which is why the wrapper has none while
 * tabs are on.
 */
.pie-showcase__panel[hidden] {
  display: none;
}
.pie-showcase__panel {
  /* order: 3; */
  flex: 1 1 0%;
  min-width: 0;
}
/*
 * Items container: driven entirely by the wrapper's --horizontal/--vertical
 * modifier class (not a class on the container itself) so the JS layout
 * switcher — which only ever toggles the wrapper class — actually changes
 * the grid/list arrangement, not just the card internals.
 *
 * Column count (vertical only right now) comes from --pcs-columns-vertical,
 * set inline per shortcode instance (PIE_CPTS_Shortcode::render()) from the
 * Shortcode Builder's "จำนวนต่อแถว (แนวตั้ง)" field — the number below is only
 * the fallback for instances rendered without it (e.g. a theme template
 * calling get_template() directly). Breakpoints cap the configured count with
 * min() rather than hardcoding a lower number, so a preset author who
 * deliberately picks fewer columns than the default never sees *more*
 * columns appear on a narrower viewport.
 *
 * "จำนวนต่อแถว (แนวนอน)" (--pcs-columns-horizontal) is temporarily disabled —
 * the UI field is commented out in class-builder.php and every rule below
 * that would read the var is commented out too, locked to a fixed 1 column
 * instead. To bring it back: uncomment the field in class-builder.php and
 * the var() usages below.
 */

.pie-showcase__items {
  width: 100%;
}

.pie-showcase--vertical .pie-showcase__items {
  display: grid;
  grid-template-columns: repeat(var(--pcs-columns-vertical, 4), 1fr);
  gap: 10px;
}

.pie-showcase--horizontal .pie-showcase__items {
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* จำนวนต่อแถว (แนวนอน) — ปิดการทำงานไว้ก่อน ล็อกที่ 1 คอลัมน์ (เดิมอ่านจาก
     var(--pcs-columns-horizontal, 1) ที่ผูกกับช่องตั้งค่าใน Shortcode Builder) */
  /* display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--pcs-gap); */
}
@media (max-width: 1280px) {
  .pie-showcase--horizontal .pie-showcase__items {
    /* จำนวนต่อแถว (แนวนอน) — ปิดการทำงานไว้ก่อนเช่นเดียวกับด้านบน */
    /* grid-template-columns: repeat(min(var(--pcs-columns-vertical, 2), 1), 1fr); */
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 1024px) {
  .pie-showcase--vertical .pie-showcase__items {
    grid-template-columns: repeat(min(var(--pcs-columns-vertical, 4), 3), 1fr);
  }
}

@media (max-width: 960px) {
  .pie-showcase--vertical .pie-showcase__items {
    grid-template-columns: repeat(min(var(--pcs-columns-vertical, 4), 2), 1fr);
  }

  .pie-showcase--horizontal .pie-showcase__items {
    /* จำนวนต่อแถว (แนวนอน) — ปิดการทำงานไว้ก่อนเช่นเดียวกับด้านบน */
    /* grid-template-columns: repeat(
      min(var(--pcs-columns-horizontal, 2), 1),
      1fr
    ); */
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 600px) {
  .pie-showcase--vertical .pie-showcase__items {
    grid-template-columns: 1fr;
  }
}

/*
 * Mixed layout ("แนวนอน + แนวตั้ง"): the first item renders on its own as a
 * full-width horizontal row, the rest as the usual vertical grid — two
 * containers (templates/layout-mixed.php), each styled here rather than by
 * reusing the `--horizontal` / `--vertical` wrapper rules above, which can only
 * ever describe one arrangement at a time for the whole instance.
 */
.pie-showcase--mixed .pie-showcase__items--lead {
  display: flex;
  /* grid-template-columns: 1fr; */
  gap: var(--pcs-gap);
  flex-direction: column;
}

/* Column count follows the Shortcode Builder's "จำนวนต่อแถว (แนวตั้ง)"
   (columns_vertical) through the --pcs-columns-vertical var the wrapper
   carries inline, exactly like the vertical layout above — the 4 is only the
   fallback for instances rendered without it. */
.pie-showcase--mixed .pie-showcase__items--rest {
  display: grid;
  grid-template-columns: repeat(var(--pcs-columns-vertical, 4), 1fr);
  gap: var(--pcs-gap);
}

.pie-showcase--mixed .pie-showcase__items--lead .pie-showcase__item {
  flex-direction: row;
  align-items: stretch;
}

.pie-showcase--mixed .pie-showcase__items--rest .pie-showcase__item {
  flex-direction: column;
}

.pie-showcase--mixed .pie-showcase__items--lead .pie-showcase__thumb-link {
  flex: 0 0 clamp(160px, 34%, 360px);
}

.pie-showcase--mixed .pie-showcase__items--rest .pie-showcase__thumb-link {
}

/* Same reasoning as the horizontal layout: the wider lead row fits one more
   line of excerpt before clamping. */
.pie-showcase--mixed .pie-showcase__items--lead .pie-showcase__excerpt {
  -webkit-line-clamp: 3;
}

.pie-showcase--mixed .pie-showcase__items--lead .pie-showcase__body {
  justify-content: left;
}

.pie-showcase--mixed .pie-showcase__items--rest .pie-showcase__body {
}

@media (max-width: 640px) {
  /* .pie-showcase--mixed .pie-showcase__items--lead .pie-showcase__item {
    flex-direction: column;
  } */

  .pie-showcase--mixed .pie-showcase__items--lead .pie-showcase__thumb-link {
  }
}

/* Below the laptop breakpoint the configured column count stops fitting, so
   the rest-grid fills each row with as many >=200px tracks as the container
   allows instead. That also covers phones on its own — at a 200px minimum a
   narrow viewport leaves room for exactly one track — which is why there is no
   separate 600px rule here any more. */
@media (max-width: 1024px) {
  .pie-showcase--mixed .pie-showcase__items--rest {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/*
 * Scroll mode ("โหมดเลื่อนรายการ", `show_scroll_nav`).
 *
 * Deliberately declares no `overflow`: what actually makes the container
 * scroll stays the preset's own Custom CSS (`overflow-x: auto` on
 * `.pie-showcase__items`), so enabling the toggle can never fight the layout
 * a preset author already wrote. All this contributes is hiding the native
 * scrollbar — the nav buttons below replace it as the affordance, which is why
 * showcase.js hides that whole row again when there's nothing to scroll.
 */
.pie-showcase--scroll .pie-showcase__items {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}

.pie-showcase--scroll .pie-showcase__items::-webkit-scrollbar {
  display: none;
}

/* Scroll nav — prev/next buttons, top-right above the items container */
.pie-showcase__scroll-nav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

/* Toggled by showcase.js when the items container has nothing to scroll */
.pie-showcase__scroll-nav.is-hidden {
  display: none;
}

.pie-showcase__scroll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--pcs-muted);
  background: var(--pcs-surface);
  border: 1px solid var(--pcs-border);
  border-radius: calc(var(--pcs-radius) / 2);
  cursor: pointer;
}

/*
 * Sized here rather than via `.pie-showcase__icon`: that shared base rule
 * carries a `padding-right`, which would push the glyph off-centre inside a
 * square button.
 */
.pie-showcase__scroll-btn svg {
  width: 24px;
  height: 24px;
}

.pie-showcase__scroll-btn:hover:not(:disabled) {
  color: #fff;
  background: var(--pcs-primary);
  border-color: var(--pcs-primary);
}

.pie-showcase__scroll-btn:focus-visible {
  outline: none;
  /* outline-offset: 2px; */
}

.pie-showcase__scroll-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/*
 * Slide mode ("แสดงผลแบบ Slide", `slide` / per-tab `tabs_slide`) — horizontal
 * and vertical layouts only; the mixed layout's two-container markup has no
 * single track to slide, so its template never reads this toggle at all.
 * templates/layout-{horizontal,vertical}.php render exactly the same
 * `.pie-showcase__item` cards as the non-slide arrangement, just without a
 * grid/stack wrapper around them, and add the `--slide` modifier below +
 * one dot per item. Each card fills the whole track (regardless of the
 * layout's own "จำนวนต่อแถว" — this always shows one item at a time, not one
 * row), so a card that would otherwise be part of a 4-column grid or a
 * stacked list row here becomes its own full-width, full-height slide.
 * Touch/trackpad swiping works for free via native scroll-snap; the dots
 * below (assets/js/showcase.js) scroll one item at a time and mirror
 * whichever item is currently snapped into view. Selectors below match
 * `.pie-showcase--vertical .pie-showcase__items` / `.pie-showcase--horizontal
 * .pie-showcase__items`'s own specificity (two classes) so they win the
 * cascade against those base `display: grid` / `display: flex` rules rather
 * than losing to them — `.pie-showcase__items--slide` alone (one class) would.
 */
.pie-showcase--horizontal .pie-showcase__items--slide,
.pie-showcase--vertical .pie-showcase__items--slide {
  display: flex;
  /* Explicit, not left to the initial value: .pie-showcase--horizontal
     .pie-showcase__items (same specificity, two classes) sets
     flex-direction: column, and a later rule of equal specificity only wins
     per-property — without this, a horizontal-layout slide silently inherits
     that column direction and stacks every card instead of laying them out
     side by side for the track to scroll through. */
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge */
}

.pie-showcase__items--slide::-webkit-scrollbar {
  display: none;
}

.pie-showcase__items--slide > .pie-showcase__item {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/* Dot navigation, centred below the slide track. */
.pie-showcase__slide-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.pie-showcase__slide-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--pcs-border);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.pie-showcase__slide-dot.is-active {
  background: var(--pcs-primary);
}

.pie-showcase__slide-dot:focus-visible {
  outline: 2px solid var(--pcs-primary);
  outline-offset: 2px;
}

/* Item card — shared markup, styled differently per layout via wrapper class */
.pie-showcase__item {
  display: flex;
  position: relative; /* containing block for .pie-showcase__card-link below */
  min-width: 0;
  max-width: 100%;
  background: var(--pcs-surface);
  border: 1px solid var(--pcs-border);
  border-radius: var(--pcs-radius);
  overflow: hidden;
}

/* Stretched-link overlay (templates/item-card.php) — makes the whole card
   clickable rather than just the thumb/title text. Sits above the card's own
   content by default; the badge and share button opt back above *it* below,
   since they go to a different destination / trigger a different action than
   the card itself. */
.pie-showcase__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pie-showcase__item img {
  width: 100%;
  aspect-ratio: 16 / 9; /* หรือสัดส่วนที่ต้องการ เช่น 4 / 3, 1 / 1 */
  object-fit: cover; /* บังคับให้รูปเต็มพื้นที่โดยไม่เสียสัดส่วน */
  height: 100%;
  display: block;
}

.pie-showcase--vertical .pie-showcase__item {
  flex-direction: column;
}

.pie-showcase--horizontal .pie-showcase__item {
  flex-direction: row;
  align-items: stretch;

  /* The horizontal card is image + text side by side with no surrounding box —
     the base card border/radius/clip (above) is for the vertical/mixed grid
     card look, not this one. The thumbnail carries its own radius instead
     (see .pie-showcase--horizontal .pie-showcase__thumb-link below), and
     `overflow: visible` keeps the "go to" badge's shadow from being clipped. */
  /* background: var(--pcs-surface);
  border: none;
  border-radius:  var(--pcs-radius);
  overflow: visible; */
  padding-left: 9px;
}

/* Card hooks, two axes (see templates/item-card.php). Destination: every card
   carries exactly one of `--file` (opens an uploaded file in a new tab) or
   `--content` (goes to its own permalink). Type: `--type-{content_type}` carries
   the item's own type verbatim — 'content'/'file' from ACF, or whatever a bridge
   plugin sets (DWR News: 'article'/'link'/'document'), which is what separates
   types that share a destination. Deliberately left without any declarations
   here — they exist purely as selectors for per-preset Custom CSS, so every card
   looks identical until a site actually styles them apart. */

.pie-showcase__thumb-link {
  display: block;
  text-decoration: none;
}

.pie-showcase__item--type-link .pie-showcase__body .pie-showcase__title a {
  max-height: fit-content;
  /* -webkit-line-clamp: unset !important; */
}

.pie-showcase__item--file .pie-showcase__thumb-glyph-icon,
.pie-showcase__item--type-link .pie-showcase__thumb-glyph-icon {
  width: 50%;
  /* aspect-ratio: auto; */
}

.pie-showcase__item--file .pie-showcase__thumb,
.pie-showcase__item--type-link .pie-showcase__thumb {
  background: var(--wp--preset--color--base, #ffffff);
}

/* A file/link card is a row of metadata, not a piece of content to preview:
   no excerpt worth reading, and a thumb that's an icon rather than a photo. So
   it gets a compact fixed height with a narrow thumb column, and the date drops
   the divider that separates it from the excerpt above on a content card.
   Keyed off the *destination* axis (`--file`), not `--type-file`, since a card
   that opens a file arrives under several type names — 'file' from
   dwr-e-procurement-sync / dwr-post-manager / plain ACF, 'document' from
   dwr-news-management — while `--file` covers all of them. */
/* .pie-showcase__item--file,
.pie-showcase__item--type-link {
  max-height: 130px;
  overflow: hidden; 
} */

.pie-showcase__item--file .pie-showcase__thumb-glyph,
.pie-showcase__item--type-link .pie-showcase__thumb-glyph {
  /* aspect-ratio: 16/9; */
}

.pie-showcase__item--file .pie-showcase__date,
.pie-showcase__item--type-link .pie-showcase__date {
  margin-top: 0;
  border-top: 0;
}

/*
 * "Go to" arrow badge — a circular overlay on the thumbnail's corner, shown
 * for the horizontal (list) layout only (see the --horizontal rule near the
 * other horizontal-specific overrides below). Shared markup
 * (templates/item-card.php) hidden by default, same as every other
 * layout-specific bit in this file, so switching layouts stays a pure CSS
 * toggle — it needs `position: relative` on the thumb link, which the
 * --horizontal override below also sets.
 */
.pie-showcase__thumb-arrow {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--pcs-primary);
  background: var(--pcs-surface);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.pie-showcase__thumb-arrow svg {
  width: 18px;
  height: 18px;
}

/*
 * "หมุด" pin badge (WD-276/WD-295) — an absolute overlay on the card's top-left
 * corner, same positioning approach as .pie-showcase__thumb-arrow above (both
 * rely on .pie-showcase__item's own `position: relative` as their containing
 * block, so this works identically across vertical/horizontal/mixed layouts
 * without each needing its own override). Kept on the left specifically so it
 * never collides with the arrow badge, which only ever renders on the right.
 * Lifted above .pie-showcase__card-link (z-index: 1) like the category badge
 * and share button, even though it isn't itself a link.
 */
.pie-showcase__pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px 4px 8px;
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 600;
  line-height: 1;
  color: var(--pcs-surface);
  background: var(--wp--preset--color--accent-2, #e53935);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.pie-showcase__pin-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* "ใหม่" badge (data-driven, set by a bridge — see templates/item-card.php).
   Top-right corner so it never collides with the pin badge on the left; same
   positioning approach (relies on .pie-showcase__item's own `position: relative`)
   and the same lift above .pie-showcase__card-link as the pin. */
.pie-showcase__new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 4px 12px;
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  /* Red by default (an "ใหม่" tag reads as urgent regardless of the card's
     palette); a preset's Custom CSS can retint it via these two knobs. */
  color: var(--pcs-new-badge-color, #fff);
  background: var(--pcs-new-badge-bg, #e8342a);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.pie-showcase__thumb {
  display: block;
  /* width: 100%; */
  /* height: 100%; */
  object-fit: cover;
}

.pie-showcase__thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: #d9d9e2;
}

/* Cards with no image at all draw a glyph on the placeholder's grey field
   instead of leaving it blank — a file icon plus extension for file items, or
   the content type's own glyph (news article, link) for the rest. One shared
   field so every fallback looks like the same deliberate placeholder; the
   type-specific classes below it are hooks only. See templates/item-card.php. */
.pie-showcase__thumb-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 12px;
  color: var(--pcs-primary);
}

.pie-showcase__thumb-glyph-icon {
  min-width: 28px;
  height: auto;
}

/* The department logo (WD-223) is a wordmark, not a square glyph — needs more
   room than the icon sizing above or it renders illegibly small. */
.pie-showcase__thumb-default-logo-icon {
  width: 55%;
  max-width: 140px;
  min-width: 60px;
  height: auto;
}

.pie-showcase__thumb-file-ext {
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pie-showcase__thumb-dates {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 12px;
  flex-wrap: nowrap;
}

.pie-showcase__thumb-date {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--pcs-text);
}

.pie-showcase__thumb-date-label {
  font-size: var(--wp--preset--font-size--xs, 12px);
  color: var(--pcs-muted);
}

.pie-showcase__thumb-date-value {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  font-size: var(--wp--preset--font-size--l, 14px);
  font-weight: 600;
  color: var(--pcs-primary);
}

.pie-showcase__thumb-date-day {
  font-size: var(--wp--preset--font-size--topic);
  color: inherit;
  flex-basis: 100%;
  text-align: center;
}
.pie-showcase__thumb-date-month,
.pie-showcase__thumb-date-year {
  font: inherit;
  color: inherit;
}

/*
 * Event state (thumb_mode="dates"): finished events fade to grey, upcoming ones
 * get a purple tint, and an event running today is filled solid dark purple.
 * Items with no start date keep the neutral default above.
 */
.pie-showcase__thumb-dates.is-past {
  background: linear-gradient(
    in srgb,
    var(--pcs-surface) 0%,
    var(--pcs-status-past)
  );
}

.pie-showcase__thumb-dates.is-past .pie-showcase__thumb-date-value {
  color: var(--pcs-status-past);
}

.pie-showcase__thumb-dates.is-upcoming {
  background: linear-gradient(
    in srgb,
    var(--pcs-surface) 0%,
    var(--pcs-status-upcoming)
  );
}

.pie-showcase__thumb-dates.is-upcoming .pie-showcase__thumb-date-value {
  color: var(--pcs-primary);
}

.pie-showcase__thumb-dates.is-current {
  background: linear-gradient(
    in srgb,
    var(--pcs-status-upcoming) 0%,
    var(--pcs-status-current)
  );
}

.pie-showcase__thumb-dates.is-current .pie-showcase__thumb-date,
.pie-showcase__thumb-dates.is-current .pie-showcase__thumb-date-label,
.pie-showcase__thumb-dates.is-current .pie-showcase__thumb-date-value {
  color: #fff;
}

.pie-showcase--vertical .pie-showcase__thumb-link {
  aspect-ratio: 16 / 9;
}

.pie-showcase--horizontal .pie-showcase__thumb-link {
  flex: 0 0 clamp(160px, 34%, 360px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  max-width: 100px;
}

.pie-showcase--horizontal .pie-showcase__thumb-arrow {
  display: flex;
}

@media (max-width: 640px) {
  .pie-showcase--horizontal .pie-showcase__items {
    grid-template-columns: 1fr;
  }

  .pie-showcase--horizontal .pie-showcase__item {
  }
}

.pie-showcase__body {
  padding: 16px;
  display: flex;
  flex-direction: row; /* เปลี่ยนเป็นแนวนอน */
  flex-wrap: wrap; /* ให้ตัวที่ไม่พอตกบรรทัด */
  flex: 1;
  min-width: 0;
  gap: 8px;
  background: var(--wp--preset--color--base, #ffffff);
}

/* Category badge shows in both grid and list layouts */

.pie-showcase--horizontal .pie-showcase__body {
  justify-content: left;
  /* No left/right padding: the gap on .pie-showcase--horizontal
     .pie-showcase__item already spaces the text block off the thumbnail. */
}

/* Horizontal rows have more width than vertical cards, so the excerpt gets an
   extra line before clamping instead of reusing the 2-line vertical clamp. */
.pie-showcase--horizontal .pie-showcase__excerpt {
  -webkit-line-clamp: 3;
  color: var(--wp--preset--color--accent-4);
}

.pie-showcase--horizontal .pie-showcase__title a {
  color: var(--pcs-contrast);
}

.pie-showcase--horizontal .pie-showcase__title a:hover {
  color: var(--pcs-contrast-2);
}

/* .pie-showcase__card-link sits visually on top of the title/read-more text,
   so a mouse hovering that text is actually hovering the overlay, not these
   anchors themselves — their own :hover above/below never fires with the mouse.
   Keying the same colors off the card's :hover instead keeps the visual
   feedback working; keyboard focus is unaffected since it lands on the real
   anchor regardless of stacking order. */
.pie-showcase--horizontal .pie-showcase__item:hover .pie-showcase__title a {
  color: var(--pcs-contrast-2);
}

.pie-showcase--horizontal .pie-showcase__date {
  color: var(--pcs-contrast-2);
}

.pie-showcase__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 3px 10px;
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 600;
  color: var(--pcs-surface);
  background: var(--pcs-contrast-2);
  text-decoration: none;
}

.pie-showcase__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--base, 16px);
  line-height: 1.4;
  font-weight: 500;
}

.pie-showcase__title-icon {
  display: inline-block;
  /* width: 1.1em; */
  height: 4em;
  margin-right: 6px;
  vertical-align: -0.2em;
  object-fit: contain;
  color: var(--pcs-primary);
}

.pie-showcase__title a {
  color: var(--pcs-text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* overflow-wrap: break-word;
  word-break: break-word; */
  text-overflow: ellipsis;

  /* 1. กำหนด line-height เป็นตัวเลขที่แน่นอน (ไม่ใช้หน่วย em หรือ % เพื่อให้คำนวณง่าย) */
  line-height: 1.5rem;

  /* 2. ล็อกความสูงสูงสุดไว้ที่ (line-height × จำนวนบรรทัด) เพื่อตัดบรรทัดที่ 3 ทิ้งไปเลย */
  max-height: 3rem; /* มาจาก 1.5rem x 2 บรรทัด */

  /* 3. หากต้องการเพิ่มพื้นที่ด้านบน ให้ขยับ margin หรือใส่ padding นิดเดียวพอ */
  padding-top: 2px;
}

.pie-showcase__title a:hover {
  color: var(--pcs-contrast-2);
}

.pie-showcase__excerpt {
  color: var(--wp--preset--color--accent-4);
  margin: 0;
  font-size: var(--wp--preset--font-size--sm, 14px);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pie-showcase__acf-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--wp--preset--font-size--xs, 13px);
  color: var(--pcs-muted);
}

/* Event detail rows (time range + location) */
.pie-showcase__detail {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--wp--preset--font-size--xs, 12px);
  color: var(--pcs-muted);
}

.pie-showcase__detail .pie-showcase__icon {
  /* .pie-showcase__icon's own base rule (near the top of this file) is
     `display: none` — every other context that uses that class sets its own
     `display` back (e.g. .pie-showcase__filter-search .pie-showcase__icon),
     which this rule never did, silently hiding the location/time icons. Fixed
     here rather than separately since .pie-showcase__views (WD-295) below
     reuses this exact selector and needs its icon to actually render. */
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  color: var(--pcs-accent);
}

.pie-showcase__detail span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Location, time, date and share are each a direct flex item of
   `.pie-showcase__body` (no wrapper), so per-preset custom CSS can `order` them
   individually against title/excerpt/read-more. The auto margin that used to push
   the whole meta block to the bottom of the card therefore goes on whichever of
   them renders first, and the later ones reset it — flex splits free space
   between *every* auto margin it finds, so more than one would spread the group
   out instead of sinking it. */
.pie-showcase__detail,
/* .pie-showcase__date, */
.pie-showcase__share {
  margin-top: auto;
}
.pie-showcase__badge-wrapper,
.pie-showcase__title,
.pie-showcase__excerpt,
.pie-showcase__time,
.pie-showcase__location,
.pie-showcase__views,
.pie-showcase__file-meta {
  flex: 0 0 100%;
}

/* Lifted above .pie-showcase__card-link (z-index: 1): the badge links to its
   term archive and share triggers the share sheet, neither of which is the
   card's own destination, so both need to stay clickable in their own right
   instead of being swallowed by the stretched overlay. */
.pie-showcase__badge-wrapper,
.pie-showcase__share {
  position: relative;
  z-index: 2;
}

.pie-showcase__detail ~ .pie-showcase__detail,
.pie-showcase__detail ~ .pie-showcase__date,
.pie-showcase__detail ~ .pie-showcase__share,
.pie-showcase__detail ~ .pie-showcase__views,
.pie-showcase__date ~ .pie-showcase__share,
.pie-showcase__date ~ .pie-showcase__views,
.pie-showcase__views ~ .pie-showcase__share {
  margin-top: 0;
}

/* "วันที่ update / ขนาดไฟล์ / ยอดดาวน์โหลด" (WD-276) — a row of its own rather
   than three separate .pie-showcase__detail items, since all three only ever
   appear together (gated on $item['file'] in item-card.php) and read better as
   one compact strip than as three full-width rows. */
.pie-showcase__file-meta {
  display: flex;
  flex-wrap: wrap;
  /* gap: 4px 16px; */
  /* margin-top: 8px; */
  /* padding-top: 8px; */
  /* border-top: 2px solid var(--pcs-border); */
  font-size: var(--wp--preset--font-size--xs, 13px);
  color: var(--pcs-muted);
  justify-content: space-between;
}

.pie-showcase__file-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.pie-showcase__file-meta-item .pie-showcase__icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  color: var(--pcs-accent);
}

.pie-showcase__date {
  flex-grow: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  /* margin-top: 10px; */
  padding-top: 10px;
  /* Divider between the excerpt above and the date row — grey, matching the
     border color used everywhere else in this file (filter bar, toolbar, etc). */
  border-top: 2px solid var(--pcs-border);
  font-size: var(--wp--preset--font-size--xs, 12px);
  color: var(--pcs-contrast-2);
}

/* Share the date row instead of stacking: when the views/downloads count
   (WD-295) follows the date, keep both on one line — date stays pinned left
   via its own flex-grow above, this override drops .pie-showcase__views back
   out of the "own full row" group above (higher specificity than the bare
   .pie-showcase__views selector there) so it's pulled flush right by the
   free space .pie-showcase__date is already growing into. */
.pie-showcase__date ~ .pie-showcase__views {
  flex: 0 0 auto;
  align-self: flex-start;
}

.pie-showcase__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--pcs-muted);
  cursor: pointer;
  border-radius: 50%;
}

.pie-showcase__share:hover {
  color: var(--pcs-primary);
  background: color-mix(in srgb, var(--pcs-primary) 10%, transparent);
}

.pie-showcase__read-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 8px;
  font-size: var(--wp--preset--font-size--xs, 13px);
  font-weight: 600;
  color: var(--pcs-primary);
  text-decoration: none;
}

.pie-showcase__read-more:hover {
  text-decoration: underline;
}

/* Same overlay-covers-the-text situation as the title above. */
.pie-showcase__item:hover .pie-showcase__read-more {
  text-decoration: underline;
}

.pie-showcase__empty {
  padding: 32px;
  text-align: center;
  color: var(--pcs-muted);
  background: var(--pcs-surface);
  border: 1px dashed var(--pcs-border);
  border-radius: var(--pcs-radius);
  width: 100%;
}

/* Pagination */
.pie-showcase__pagination {
  margin-top: var(--pcs-gap);
  margin-bottom: 20px;
  /* Same as `.pie-showcase__toolbar` / `.pie-showcase__filter-bar`: `.pie-showcase`
     is a wrapping flex row, so without an explicit full-width flex-basis this
     nav shrinks to its own content width and sits flush left — leaving the
     `ul`'s `justify-content: center` (below) nothing to center within. */
  width: 100%;
  justify-content: center;
  display: flex;
}

.pie-showcase__pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie-showcase__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  color: var(--wp--preset--color--contrast-2, #0068c9);
  text-decoration: none;
  /* border: 1px solid var(--pcs-border); */
  border-radius: calc(var(--pcs-radius) / 2);
}

.pie-showcase__pagination .page-numbers.current {
  color: #fff;
  background: var(--wp--preset--color--contrast-2, #0068c9);
  border-color: var(--wp--preset--color--contrast-2, #0068c9);
}

.pie-showcase__pagination .page-numbers.dots {
  border: none;
}

/* View all */
.pie-showcase__view-all {
  margin-top: var(--pcs-gap);
  text-align: center;
  width: 100%;
}

.pie-showcase__view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  color: var(--wp--preset--color--base, #ffffff);
  background: var(--wp--preset--color--contrast-2, #0068c9);
  /* border: 1px solid var(--pcs-accent); */
  /* border-radius: calc(var(--pcs-radius) / 2); */
  border-radius: 999px;
  text-decoration: none;
  /* font-weight: 600; */
}

.pie-showcase__view-all-link:hover {
  /* color: #fff; */
  background: var(--wp--preset--color--contrast, #003087);
}

/* Calendar (month grid) — rounded-tile design */
.pie-showcase__calendar {
  background: var(--pcs-surface);
  border-radius: var(--pcs-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Dark header bar: month + year centred, prev/next arrows at the edges. */
.pie-showcase__calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: var(--pcs-primary);
}

.pie-showcase__calendar-title {
  flex: 1;
  font-size: var(--wp--preset--font-size--l, 22px);
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.pie-showcase__calendar-year {
  margin-left: 4px;
  font-weight: 400;
  opacity: 0.9;
}

.pie-showcase__calendar-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  color: #fff;
  background: transparent;
  border: none;
  border-radius: calc(var(--pcs-radius) / 2);
  text-decoration: none;
}

.pie-showcase__calendar-navbtn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.pie-showcase__calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 16px;
}

.pie-showcase__calendar-weekday {
  padding: 2px 0 6px;
  text-align: center;
  font-size: var(--wp--preset--font-size--xs, 12px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pcs-muted);
}

/* The weekday column that today falls in gets an accent colour. */
.pie-showcase__calendar-weekday.is-today {
  color: var(--pcs-primary);
}

.pie-showcase__calendar-day {
  display: flex;
  align-items: flex-start;
  min-height: 64px;
  padding: 10px;
  background: color-mix(in srgb, var(--pcs-text) 4%, var(--pcs-surface));
  border-radius: var(--pcs-radius);
}

.pie-showcase__calendar-day.is-blank {
  background: transparent;
}

/* Today: solid filled tile with a white number. */
.pie-showcase__calendar-day.is-today {
  background: var(--pcs-primary);
}

.pie-showcase__calendar-daynum {
  font-size: var(--wp--preset--font-size--s, 15px);
  font-weight: 700;
  color: var(--pcs-text);
}

.pie-showcase__calendar-day.is-today .pie-showcase__calendar-daynum {
  color: #fff;
}

/*
 * Days with one or more items just get a colour highlight (no event list),
 * matching the cards' event states: grey for days whose events are over, purple
 * for days still ahead, dark purple for today. Days with no event at all fall
 * through to the plain `.pie-showcase__calendar-day` / `.is-today` styling
 * above — the states only ever repaint days that actually carry an event.
 */
.pie-showcase__calendar-day.has-events.is-past {
  background: color-mix(
    in srgb,
    var(--pcs-status-past) 30%,
    var(--pcs-surface)
  );
}

.pie-showcase__calendar-day.has-events.is-past .pie-showcase__calendar-daynum {
  color: var(--pcs-status-past);
}

.pie-showcase__calendar-day.has-events.is-upcoming {
  background: color-mix(
    in srgb,
    var(--pcs-status-upcoming) 30%,
    var(--pcs-surface)
  );
}

.pie-showcase__calendar-day.has-events.is-upcoming
  .pie-showcase__calendar-daynum {
  color: var(--pcs-status-upcoming);
}

.pie-showcase__calendar-day.has-events.is-current {
  background: var(--pcs-status-current);
}

.pie-showcase__calendar-day.has-events.is-current
  .pie-showcase__calendar-daynum {
  color: #fff;
}

/*
 * Days that carry items are clickable (they narrow the list beside the calendar
 * to that one day). The link stretches to the cell's edges — hence the negative
 * margin cancelling the cell's own padding — so the whole tile is the hit area,
 * rather than just the day number inside it.
 */
.pie-showcase__calendar-daylink {
  display: flex;
  flex: 1;
  align-items: flex-start;
  margin: -10px;
  padding: 10px;
  border-radius: inherit;
  text-decoration: none;
  cursor: pointer;
}

.pie-showcase__calendar-day.has-events:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.pie-showcase__calendar-daylink:focus-visible {
  outline: none;
  /* outline-offset: -2px; */
}

/* The day the list is currently narrowed to. */
.pie-showcase__calendar-day.is-selected {
  box-shadow: 0 0 0 2px var(--pcs-primary);
}

.pie-showcase__calendar-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: var(--wp--preset--font-size--xs, 14px);
  color: var(--pcs-muted);
}

.pie-showcase__calendar-selected-clear {
  color: var(--pcs-primary);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .pie-showcase__calendar-grid {
    gap: 5px;
    padding: 10px;
  }

  .pie-showcase__calendar-day {
    min-height: 44px;
    padding: 6px;
  }

  .pie-showcase__calendar-daylink {
    margin: -6px;
    padding: 6px;
  }
}

/*
 * Calendar companion (the show_calendar toggle): the month grid sits to the
 * left of the chosen list layout, both fed by the same unpaginated query so
 * their item sets always match. Stacks vertically (calendar first) on narrow
 * screens.
 */
.pie-showcase__split {
  display: flex;
  align-items: flex-start;
  gap: var(--pcs-gap);
}

.pie-showcase__split > .pie-showcase__calendar {
  flex: 1 1 40%;
  min-width: 0;
}

.pie-showcase__split-list {
  flex: 1 1 42%;
  min-width: 0;
}

/* The list beside the calendar is narrow, so its grid collapses to one column
   regardless of the wrapper's --vertical 3-column rule. */
.pie-showcase--has-calendar .pie-showcase__split-list .pie-showcase__items {
  grid-template-columns: 1fr;
}

@media (max-width: 900px) {
  .pie-showcase__split {
    flex-direction: column;
  }

  .pie-showcase__split > .pie-showcase__calendar,
  .pie-showcase__split-list {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Share toast */
.pie-showcase-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(10px);
  padding: 10px 20px;
  background: var(--pcs-primary, #3d3a6e);
  color: #fff;
  border-radius: 999px;
  font-size: var(--wp--preset--font-size--xs, 14px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 9999;
}

.pie-showcase-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.pie-showcase--horizontal .pie-showcase__thumb-glyph-icon {
  /* width: 100%; */
width: 50px;
height: 50px;
}