/* Declare cascade layer order — earliest = lowest priority.
   Unlayered CSS (e.g. consumer's widgetRepeater.overrides.css) always
   wins over rules inside any layer, regardless of <link> load order. */
@layer widgetRepeater.tokens, widgetRepeater;

@import url('./widgetRepeater.tokens.css') layer(widgetRepeater.tokens);

/* ============================================================
   Widget Repeater Block — list of children of picked source nodes
   ============================================================
   ไฟล์นี้คือ component rules ทั้งหมด. ทุก CSS variable override
   surface ประกาศใน widgetRepeater.tokens.css (BRAND + PAGER +
   STYLE TAB). Internal scale (spacing / font-size / shadow primitives)
   เป็น literal value ตรงในกฎ — ไม่ใช่ token (ลด override noise)
   ดู docs/widget-repeater-tokens.md

   ทุกกฎ wrap ใน @layer widgetRepeater เพื่อให้ consumer's
   widgetRepeater.overrides.css (unlayered) ชนะ specificity เสมอ
   ไม่ว่า load order จะเป็นยังไง
   ============================================================ */
@layer widgetRepeater {
.widget-repeater {
  padding: var(--wr-padding-y, 40px) var(--wr-padding-x, 20px);
  margin: var(--wr-margin-y, 0) var(--wr-margin-x, 0);
  background: var(--wr-bg, transparent);
}
.widget-repeater[data-wr-loading="true"] {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.widget-repeater__head {
  max-width: var(--wr-max-width, 960px);
  margin: 0 auto 28px;
  text-align: center;
}
.widget-repeater__title {
  font-family: var(--wr-font-family);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 8px;
}
.widget-repeater__sub {
  font-size: 16px;
  line-height: 1.5;
  color: #4b4b4b;
  margin: 0;
}
.widget-repeater__empty {
  max-width: var(--wr-max-width, 100%);
  margin: 0 auto;
  text-align: center;
  color: #888;
  font-style: italic;
}
.widget-repeater__filters {
  max-width: var(--wr-max-width, 100%);
  margin: 0 auto 16px;
}
.widget-repeater__filters--top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Starter filter chips (sort by date) ---- */
.widget-repeater__filter--sort {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--wr-color-border);
  border-radius: var(--wr-radius-pill);
  background: var(--wr-color-bg);
  color: var(--wr-color-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}
.widget-repeater__filter--sort:hover {
  color: var(--wr-color-accent);
  border-color: var(--wr-color-accent);
}
.widget-repeater__filter--sort.is-active {
  background: var(--wr-color-accent-gradient);
  border-color: transparent;
  color: var(--wr-color-text-on-accent);
}

/* ---- Starter filter dropdowns (year / month) ---- */
.widget-repeater__filter--date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.widget-repeater__filter-select {
  padding: 6px 10px;
  border: 1px solid var(--wr-color-border);
  border-radius: 8px;
  background: var(--wr-color-bg);
  color: var(--wr-color-text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.widget-repeater__grid {
  max-width: var(--wr-max-width, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--wr-min-col, 260px), 1fr)
  );
  gap: var(--wr-gap, 24px);
  justify-items: var(--wr-justify-items, stretch);
  align-items: var(--wr-align-items, stretch);
}
.widget-repeater__grid--custom {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: minmax(180px, auto);
}
.widget-repeater__cell {
  grid-column: span var(--span-lg, 12);
  grid-row: span var(--row-lg, 1);
  display: flex;
}
.widget-repeater__cell > * {
  flex: 1;
  min-width: 0;
}
@media (max-width: 1023px) {
  .widget-repeater__cell {
    grid-column: span var(--span-md, var(--span-lg, 12));
    grid-row: span var(--row-md, var(--row-lg, 1));
  }
}
@media (max-width: 767px) {
  .widget-repeater__cell {
    grid-column: span var(--span-sm, var(--span-md, var(--span-lg, 12)));
    grid-row: span var(--row-sm, var(--row-md, var(--row-lg, 1)));
  }
}
.widget-repeater__card {
  display: flex;
  flex-direction: column;
  background: var(--wr-color-bg);
  border: 1px solid var(--wr-color-border-card);
  border-radius: var(--wr-radius-lg);
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.widget-repeater__card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.widget-repeater__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--wr-color-bg-muted);
}
.widget-repeater__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.widget-repeater__body {
  padding: 16px 18px 20px;
}
.widget-repeater__name {
  font-family: var(--wr-font-family);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 8px;
}
.widget-repeater__name a {
  color: inherit;
  text-decoration: none;
}
.widget-repeater__name a:hover {
  text-decoration: underline;
}
.widget-repeater__summary {
  font-size: 14px;
  line-height: 1.5;
  color: #4b4b4b;
  margin: 0;
}

/* ---- Pager: bottom-numbered (default) ---- */
.widget-repeater__pager {
  max-width: var(--wr-max-width, 100%);
  margin: var(--wr-pager-margin-top, 32px) auto 0;
  padding: 0 var(--wr-pager-padding-x, 20px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wr-pager-gap, 8px);
  align-items: center;
}
.widget-repeater__pager--bottom-left {
  justify-content: flex-start;
}
.widget-repeater__pager--bottom-center {
  justify-content: center;
}
.widget-repeater__pager--bottom-right {
  justify-content: flex-end;
}
.widget-repeater__pager-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wr-pager-link-size, 40px);
  height: var(--wr-pager-link-size, 40px);
  padding: 0 var(--wr-pager-link-padding-x, 14px);
  border: var(--wr-pager-link-border-width, 1px) solid var(--wr-pager-link-border-color, #e5e0eb);
  border-radius: var(--wr-pager-link-radius, 10px);
  background: var(--wr-pager-link-bg, #fff);
  color: var(--wr-pager-link-color, #0f172a);
  font-family: var(--wr-font-family);
  font-weight: var(--wr-pager-link-font-weight, 600);
  font-size: var(--wr-pager-link-font-size, 14px);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--wr-pager-link-shadow, 0 1px 2px rgba(15, 23, 42, 0.04));
  transition:
    color var(--wr-pager-link-transition, 0.18s ease),
    border-color var(--wr-pager-link-transition, 0.18s ease),
    background var(--wr-pager-link-transition, 0.18s ease),
    box-shadow var(--wr-pager-link-transition, 0.18s ease),
    transform var(--wr-pager-link-transition, 0.18s ease);
}
.widget-repeater__pager-link:hover {
  color: var(--wr-pager-link-hover-color, #f85d08);
  border-color: var(--wr-pager-link-hover-border-color, #f85d08);
  background: var(--wr-pager-link-hover-bg, #fff);
  box-shadow: var(--wr-pager-link-hover-shadow, 0 4px 14px rgba(248, 93, 8, 0.18));
  transform: translateY(var(--wr-pager-link-hover-translate-y, -1px));
}
.widget-repeater__pager-link:focus-visible {
  outline: var(--wr-pager-link-focus-ring-width, 2px) solid var(--wr-pager-link-focus-ring-color, #f85d08);
  outline-offset: var(--wr-pager-link-focus-ring-offset, 2px);
}
.widget-repeater__pager-link.is-current {
  background: var(--wr-pager-link-active-bg, linear-gradient(135deg, #f85d08 0%, #f54900 50%, #f1551f 100%));
  border-color: var(--wr-pager-link-active-border-color, transparent);
  color: var(--wr-pager-link-active-color, #fff);
  cursor: default;
  box-shadow: var(--wr-pager-link-active-shadow, 0 6px 16px rgba(241, 85, 31, 0.35));
  transform: none;
}
.widget-repeater__pager-link.is-current:hover {
  color: var(--wr-pager-link-active-color, #fff);
  transform: none;
}
.widget-repeater__pager-ellipsis {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: var(--wr-pager-ellipsis-min-width, 24px);
  height: var(--wr-pager-link-size, 40px);
  padding: 0 var(--wr-pager-ellipsis-padding-x, 4px);
  color: var(--wr-pager-ellipsis-color, #98a2b3);
  font-size: var(--wr-pager-ellipsis-font-size, 14px);
  line-height: 1;
  user-select: none;
}

/* ---- Pager: side-arrows (anchored to grid edges) ---- */
.widget-repeater__grid-wrap {
  position: relative;
  max-width: var(--wr-max-width, 100%);
  margin: 0 auto;
}
.widget-repeater__grid-wrap > .widget-repeater__grid {
  margin: 0;
}
.widget-repeater__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: var(--wr-arrow-size, 48px);
  height: var(--wr-arrow-size, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wr-arrow-bg, #fff);
  color: var(--wr-arrow-color, #0f172a);
  border: 1px solid var(--wr-arrow-border-color, #e5e0eb);
  box-shadow: var(--wr-arrow-shadow, 0 6px 18px rgba(15, 23, 42, 0.12));
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.widget-repeater__arrow:hover {
  background: var(--wr-arrow-hover-bg, linear-gradient(135deg, #f85d08 0%, #f54900 50%, #f1551f 100%));
  color: var(--wr-arrow-hover-color, #fff);
  border-color: transparent;
  box-shadow: var(--wr-arrow-hover-shadow, 0 10px 24px rgba(241, 85, 31, 0.35));
  transform: translateY(-50%) scale(1.06);
}
.widget-repeater__arrow:focus-visible {
  outline: 2px solid var(--wr-color-accent);
  outline-offset: 3px;
}
.widget-repeater__arrow--prev {
  left: var(--wr-arrow-offset, -24px);
}
.widget-repeater__arrow--next {
  right: var(--wr-arrow-offset, -24px);
}
@media (max-width: 767px) {
  .widget-repeater__arrow {
    width: var(--wr-arrow-size-sm, 40px);
    height: var(--wr-arrow-size-sm, 40px);
    font-size: 20px;
  }
  .widget-repeater__arrow--prev {
    left: var(--wr-arrow-offset-sm, 6px);
  }
  .widget-repeater__arrow--next {
    right: var(--wr-arrow-offset-sm, 6px);
  }
}

@media (min-width: 1024px) {
  .widget-repeater {
    padding: var(--wr-padding-y, 56px) var(--wr-padding-x, 40px);
  }
  .widget-repeater__title {
    font-size: 36px;
  }
}

/* ---- Shared utility bits ---- */
.widget-repeater__chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--wr-radius-pill);
  background: #f1efe9;
  color: #2a2a2a;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.widget-repeater__chip--track {
  background: #e6f0ff;
  color: #1d4ed8;
}
.widget-repeater__chip--light {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.widget-repeater__meta {
  display: block;
  font-size: 12px;
  color: #6b6b6b;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.widget-repeater__location {
  font-size: 13px;
  color: #4b4b4b;
  margin: 6px 0 0;
}

/* ---- newsArticle: card variant (clickable lifted card) ---- */
.widget-repeater__card--card {
  padding: 0;
  border: 1px solid var(--wr-color-border-card);
}
.widget-repeater__card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.widget-repeater__media-frame {
  aspect-ratio: 16 / 9;
  background: var(--wr-color-bg-muted);
  position: relative;
  overflow: hidden;
}
.widget-repeater__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-repeater__media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wr-font-family);
  font-weight: 700;
  font-size: 64px;
  color: #c8c2b1;
  background: linear-gradient(135deg, #f5f1e7 0%, #ece6d3 100%);
}
.widget-repeater__card--card .widget-repeater__body {
  padding: 18px 20px 20px;
}
.widget-repeater__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: #6b6b6b;
}
.widget-repeater__cta {
  margin-left: auto;
  font-weight: 600;
  color: #2a2a2a;
  font-size: 13px;
}

/* ---- newsArticle: bg variant (full-bleed background image hero card) ---- */
.widget-repeater__card--bg {
  position: relative;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: #fff;
  border: none;
}
.widget-repeater__card--bg-none {
  background: linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 100%);
}
.widget-repeater__bg-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  color: inherit;
  text-decoration: none;
  min-height: inherit;
}
.widget-repeater__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
}
.widget-repeater__bg-body {
  position: relative;
  padding: 24px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
}
.widget-repeater__card--bg .widget-repeater__name {
  color: #fff;
  font-size: 22px;
  margin: 8px 0 8px;
}
.widget-repeater__card--bg .widget-repeater__name a {
  color: #fff;
}
.widget-repeater__card--bg .widget-repeater__summary {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
}
.widget-repeater__bg-date {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- event: date badge variant ---- */
.widget-repeater__card--event {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 16px;
}
.widget-repeater__date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
  color: #fff;
  border-radius: 8px;
  padding: 12px 8px;
}
.widget-repeater__date-badge .day {
  font-family: var(--wr-font-family);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
.widget-repeater__date-badge .month {
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
.widget-repeater__card--event .widget-repeater__body {
  padding: 0;
}

/* ---- session: chip + meta variant (no media) ---- */
.widget-repeater__card--session {
  padding: 18px 20px;
}
.widget-repeater__card--session .widget-repeater__body {
  padding: 0;
}
} /* end @layer widgetRepeater */