/*
 * Custom Category List — Frontend v1.0
 *
 * Colour strategy: uses WordPress block editor / theme CSS custom properties
 * so the component automatically inherits the active theme's palette.
 * Falls back to sensible neutrals when a theme doesn't define the variables.
 */

/* ── Theme-following colour tokens ───────────────────
   We read from WP theme variables first, then fall back.
   --wp--preset--color--primary    → tab active bg / pagination active
   --wp--preset--color--foreground → text
   --wp--preset--color--background → card bg
   --wp--preset--color--contrast   → strong text
   ─────────────────────────────────────────────────── */
.ccl-widget {
  --ccl-accent      : var(--wp--preset--color--primary, #0073aa);
  --ccl-accent-text : #ffffff;
  --ccl-bg          : var(--wp--preset--color--background, #ffffff);
  --ccl-surface     : var(--wp--preset--color--secondary, #f9f9f9);
  --ccl-border      : rgba(0,0,0,.1);
  --ccl-text        : var(--wp--preset--color--foreground, #1a1a1a);
  --ccl-muted       : var(--wp--preset--color--contrast-3, #6b6b6b);
  --ccl-tab-bg      : var(--wp--preset--color--background, #f0f0f0);
  --ccl-tab-hover   : rgba(0,0,0,.06);
  --ccl-radius      : 10px;
  --ccl-font        : var(--wp--preset--font-family--body, system-ui, -apple-system, sans-serif);
  --ccl-font-size   : var(--wp--preset--font-size--medium, 1rem);
  --ccl-tr          : 0.22s cubic-bezier(.4,0,.2,1);

  font-family : var(--ccl-font);
  color       : var(--ccl-text);
  width       : 100%;
  box-sizing  : border-box;
}

/* ── Tab bar ─────────────────────────────────────────── */
.ccl-tabs {
  position   : relative;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--ccl-border);
}

.ccl-tabs__inner {
  display     : flex;
  align-items : flex-end;
  gap         : 4px;
  overflow-x  : auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0;
}

.ccl-tabs__inner::-webkit-scrollbar { display: none; }

.ccl-tab {
  display        : inline-flex;
  align-items    : center;
  gap            : .4rem;
  padding        : .6rem 1.1rem;
  border         : 1px solid transparent;
  border-bottom  : none;
  border-radius  : var(--ccl-radius) var(--ccl-radius) 0 0;
  background     : transparent;
  color          : var(--ccl-muted);
  font-family    : var(--ccl-font);
  font-size      : .875rem;
  font-weight    : 500;
  cursor         : pointer;
  white-space    : nowrap;
  transition     : background var(--ccl-tr), color var(--ccl-tr), border-color var(--ccl-tr);
  position       : relative;
  bottom         : -2px;
  letter-spacing : .01em;
  text-decoration: none;
}

.ccl-tab:hover:not(.ccl-tab--active) {
  background : var(--ccl-tab-hover);
  color      : var(--ccl-text);
}

.ccl-tab--active {
  background   : var(--ccl-bg);
  color        : var(--ccl-accent);
  border-color : var(--ccl-border);
  border-bottom-color: var(--ccl-bg);
  font-weight  : 600;
}

/* Animated underline on active tab */
.ccl-tab--active::after {
  content    : '';
  position   : absolute;
  bottom     : -2px;
  left       : 0;
  right      : 0;
  height     : 3px;
  background : var(--ccl-accent);
  border-radius: 2px 2px 0 0;
}

.ccl-tab__count {
  display      : inline-flex;
  align-items  : center;
  justify-content: center;
  min-width    : 20px;
  height       : 20px;
  padding      : 0 5px;
  border-radius: 100px;
  font-size    : .7rem;
  font-weight  : 600;
  background   : var(--ccl-tab-hover);
  color        : var(--ccl-muted);
  transition   : background var(--ccl-tr), color var(--ccl-tr);
}

.ccl-tab--active .ccl-tab__count {
  background : var(--ccl-accent);
  color      : var(--ccl-accent-text);
}

/* ── List panel ──────────────────────────────────────── */
.ccl-panel {
  min-height: 200px;
  position  : relative;
}

/* ── Row card ────────────────────────────────────────── */
.ccl-list {
  display        : flex;
  flex-direction : column;
  gap            : 12px;
}

.ccl-row {
  display          : flex;
  align-items      : stretch;
  background       : var(--ccl-bg);
  border           : 1px solid var(--ccl-border);
  border-radius    : var(--ccl-radius);
  overflow         : hidden;
  transition       : box-shadow var(--ccl-tr), transform var(--ccl-tr);
  min-height       : 130px;
}

.ccl-row:hover {
  box-shadow : 0 4px 20px rgba(0,0,0,.1);
  transform  : translateY(-2px);
}

/* Image */
.ccl-row__img-link {
  display          : block;
  flex-shrink      : 0;
  overflow         : hidden;
  background       : var(--ccl-surface);
  position         : relative;
  text-decoration  : none;
  align-self       : stretch;
  min-height       : 130px;
}

.ccl-row__img-link img {
  position   : absolute;
  inset      : 0;
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  display    : block;
  transition : transform .45s ease;
}

.ccl-row:hover .ccl-row__img-link img {
  transform: scale(1.04);
}

.ccl-row__img-ph {
  width           : 100%;
  height          : 100%;
  min-height      : 130px;
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : var(--ccl-surface);
}

.ccl-row__img-ph svg {
  width  : 36px;
  height : 36px;
  color  : var(--ccl-border);
  opacity: .6;
}

/* Body */
.ccl-row__body {
  flex    : 1;
  min-width: 0;
  padding : 1.1rem 1.25rem;
  display : flex;
  flex-direction: column;
  justify-content: center;
  gap     : .4rem;
}

.ccl-row__meta {
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : .35rem;
}

.ccl-row__cat {
  font-size      : .67rem;
  font-weight    : 600;
  letter-spacing : .07em;
  text-transform : uppercase;
  color          : var(--ccl-accent);
  background     : color-mix(in srgb, var(--ccl-accent) 12%, transparent);
  padding        : 2px 8px;
  border-radius  : 100px;
  line-height    : 1.5;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .ccl-row__cat {
    background: var(--ccl-surface);
    color     : var(--ccl-accent);
  }
}

.ccl-row__sep { color: var(--ccl-border); font-size:.8rem; }

.ccl-row__date {
  font-size : .73rem;
  color     : var(--ccl-muted);
}

.ccl-row__title {
  font-size   : 1.05rem;
  font-weight : 600;
  line-height : 1.35;
  color       : var(--ccl-text);
  margin      : 0;
  padding     : 0;
  display     : -webkit-box;
  -webkit-line-clamp : 2;
  -webkit-box-orient : vertical;
  overflow    : hidden;
}

.ccl-row__title a {
  color           : inherit;
  text-decoration : none;
  transition      : color var(--ccl-tr);
}

.ccl-row__title a:hover { color: var(--ccl-accent); }

.ccl-row__excerpt {
  font-size  : .875rem;
  line-height: 1.6;
  color      : var(--ccl-muted);
  margin     : 0;
  display    : -webkit-box;
  -webkit-line-clamp : 2;
  -webkit-box-orient : vertical;
  overflow   : hidden;
}

.ccl-row__footer {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : .5rem;
  margin-top      : auto;
  padding-top     : .45rem;
}

.ccl-row__rm {
  display        : inline-flex;
  align-items    : center;
  gap            : .35rem;
  font-size      : .8rem;
  font-weight    : 600;
  color          : var(--ccl-accent);
  text-decoration: none;
  transition     : gap var(--ccl-tr), opacity var(--ccl-tr);
}

.ccl-row__rm:hover { gap: .55rem; opacity: .8; }

.ccl-row__rm svg {
  width      : 16px;
  height     : 16px;
  flex-shrink: 0;
}

.ccl-row__rt {
  font-size : .72rem;
  color     : var(--ccl-muted);
  white-space: nowrap;
}

/* ── Skeleton loader ─────────────────────────────────── */
.ccl-skeleton {
  display        : flex;
  flex-direction : column;
  gap            : 12px;
}

.ccl-skeleton__row {
  display     : flex;
  align-items : stretch;
  border      : 1px solid var(--ccl-border);
  border-radius: var(--ccl-radius);
  overflow    : hidden;
  min-height  : 130px;
}

.ccl-skeleton__img {
  width      : 200px;
  flex-shrink: 0;
  background : var(--ccl-surface);
  animation  : ccl-shimmer 1.4s ease infinite;
}

.ccl-skeleton__body {
  flex   : 1;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap    : 10px;
}

.ccl-skeleton__line {
  background   : var(--ccl-surface);
  border-radius: 4px;
  animation    : ccl-shimmer 1.4s ease infinite;
}

.ccl-skeleton__line--sm { height: 12px; width: 30%; }
.ccl-skeleton__line--lg { height: 18px; width: 85%; }
.ccl-skeleton__line--md { height: 12px; width: 60%; }

@keyframes ccl-shimmer {
  0%,100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* ── Pagination ──────────────────────────────────────── */
.ccl-pagination {
  display         : flex;
  align-items     : center;
  justify-content : center;
  flex-wrap       : wrap;
  gap             : 5px;
  margin-top      : 1.5rem;
}

.ccl-page-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  min-width      : 38px;
  height         : 38px;
  padding        : 0 5px;
  border-radius  : 8px;
  border         : 1px solid var(--ccl-border);
  background     : var(--ccl-bg);
  color          : var(--ccl-text);
  font-family    : var(--ccl-font);
  font-size      : .875rem;
  font-weight    : 500;
  cursor         : pointer;
  transition     : background var(--ccl-tr), color var(--ccl-tr), border-color var(--ccl-tr), transform var(--ccl-tr);
}

.ccl-page-btn svg { width:16px; height:16px; flex-shrink:0; }

.ccl-page-btn:hover:not(.ccl-page-btn--active) {
  background   : var(--ccl-accent);
  border-color : var(--ccl-accent);
  color        : var(--ccl-accent-text);
  transform    : translateY(-1px);
}

.ccl-page-btn--active {
  background   : var(--ccl-accent);
  border-color : var(--ccl-accent);
  color        : var(--ccl-accent-text);
  font-weight  : 600;
  pointer-events: none;
}

.ccl-page-btn--nav { background: var(--ccl-surface); }

.ccl-page-dots {
  display     : inline-flex;
  align-items : center;
  justify-content: center;
  min-width   : 28px;
  color       : var(--ccl-muted);
  font-size   : .875rem;
}

/* ── No posts / empty ────────────────────────────────── */
.ccl-no-posts,
.ccl-empty {
  padding    : 2rem;
  text-align : center;
  color      : var(--ccl-muted);
  font-style : italic;
  font-size  : .9rem;
}

/* ── Transition between tabs ─────────────────────────── */
.ccl-list.ccl-fading {
  opacity    : 0;
  transform  : translateY(6px);
  transition : opacity .18s ease, transform .18s ease;
}

.ccl-list.ccl-visible {
  opacity    : 1;
  transform  : translateY(0);
  transition : opacity .22s ease, transform .22s ease;
}

/* ── Row entrance animation ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ccl-row {
    opacity   : 0;
    transform : translateY(10px);
    animation : ccl-row-in .35s ease forwards;
  }
  .ccl-row:nth-child(1) { animation-delay: .03s }
  .ccl-row:nth-child(2) { animation-delay: .08s }
  .ccl-row:nth-child(3) { animation-delay: .13s }
  .ccl-row:nth-child(4) { animation-delay: .18s }
  .ccl-row:nth-child(5) { animation-delay: .23s }
  .ccl-row:nth-child(6) { animation-delay: .28s }
  @keyframes ccl-row-in { to { opacity:1; transform:translateY(0); } }
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 560px) {
  .ccl-row {
    flex-direction: column !important;
  }
  .ccl-row__img-link {
    width     : 100% !important;
    height    : 180px !important;
    min-height: 180px !important;
  }
  .ccl-row__img-link img {
    position: absolute !important;
    inset   : 0 !important;
  }
  .ccl-tab {
    padding  : .5rem .75rem;
    font-size: .8rem;
  }
}