/**
 * gcc-template-{slug}.css  ←  ĐỔI {slug} thành tên template thực tế
 * ─────────────────────────────────────────────────────────────────────────────
 * Template: [TÊN TEMPLATE]
 * Slug:     {slug}           ← khớp với value trong <select name="gcc_template">
 * Category: [birthday / holiday / wedding / love / ...]
 * Layout:   [ribbon / banner / full-bleed / minimal / ...]
 * Border:   [scallop / solid / dashed / none / ...]
 * Anim:     [heartbeat / float / shimmer / none / ...]
 *
 * LOAD ORDER:
 *   1. gcc-generate-card-preview-base.css    (khung — structural, container query, dots…)
 *   2. [file này]               (visual — màu sắc, font, animation)
 *
 * NGUYÊN TẮC QUAN TRỌNG:
 *   ✅ Scope MỌI rule vào:
 *        .gcc-preview-card.gcc-tpl-{slug}
 *        .gcc-preview-card[data-template="{slug}"]
 *      → Tự thắng cascade frame mà KHÔNG cần !important.
 *   ✅ Chỉ dùng !important khi phải đè rule frame có !important (rất hiếm).
 *   ✅ Dùng biến CSS chuẩn (--gcc-block-*) để co/giãn theo khung 9:16.
 *   ✅ Margin/padding dùng em (co theo font-size động từ frame).
 *   ✅ Font-size dùng clamp(...cqi) hoặc em.
 *   ❌ KHÔNG đặt min-height trên .gcc-preview-card (phá 9:16 frame).
 *   ❌ KHÔNG set width/max-width/aspect-ratio trên card (frame đã xử lý).
 * ─────────────────────────────────────────────────────────────────────────────
 */

/*
 * QUICK-START CHECKLIST khi tạo template mới:
 *
 *  1. Copy file này, đổi tên thành gcc-template-{slug}.css
 *  2. Find-replace "{slug}" bằng slug thực tế (vd: summer-vibes)
 *  3. Điền metadata ở header (tên, category, layout, border, anim)
 *  4. Chỉnh keyframe animation (đổi tên prefix bby- → {slug viết tắt}-)
 *  5. Tuỳ chỉnh: background, font-family, color của card/header/caption/media
 *  6. Thêm vào PHP enqueue — LUÔN load SAU gcc-generate-card-preview-base.css
 *  7. Test ở cả admin preview (9:16 frame) lẫn standalone view
 */


/* ═══════════════════════════════════════════════════════════════════════════
 * KEYFRAMES — prefix bằng slug viết tắt để tránh đụng tên
 * Ví dụ slug "summer-vibes" → prefix: sv-
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Animation chính của card — đổi tên và nội dung theo ý muốn.
 * Đặt animation-play-state: paused ở block thường,
 * chuyển thành running ở :hover / .gcc-active / .gcc-preview-active.
 */
@keyframes {slug}-main-kf {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* Animation phụ (sparkle, shimmer, rotate…) — tuỳ chọn */
@keyframes {slug}-accent-kf {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════════════
 * CARD — toàn bộ thiệp
 * ─────────────────────────────────────────────────────────────────────────
 * KHÔNG set: width, max-width, aspect-ratio, min-height, display, flex-direction
 *             → frame đã lo; nếu bạn set lại sẽ phá 9:16.
 * NÊN set:   background, border, border-radius, font-family, color, overflow
 * ═══════════════════════════════════════════════════════════════════════════ */

.gcc-preview-card.gcc-tpl-{slug},
.gcc-preview-card[data-template="{slug}"] {
  /* Thay thế toàn bộ giá trị dưới đây */
  background: linear-gradient(160deg, #YOUR_COLOR_A 0%, #ffffff 55%, #YOUR_COLOR_A 100%);
  color: #YOUR_TEXT_COLOR;
  font-family: 'Your Font', 'Noto Sans', sans-serif;

  /* Giữ lại */
  position: relative;
  overflow: hidden !important; /* !important để đảm bảo clip animation ngoài card */
}


/* ═══════════════════════════════════════════════════════════════════════════
 * HEADER (dòng "from" + title)
 * ─────────────────────────────────────────────────────────────────────────
 * Frame set: flex, flex-direction: column — không cần lặp lại.
 * Template set: background, padding, margin, border-radius, animation, shape.
 *
 * BIẾN CHUẨN (thay vì giá trị px):
 *   margin:  var(--gcc-block-margin-y) var(--gcc-block-margin-x)
 *   padding: var(--gcc-block-pad-y) var(--gcc-block-pad-x)
 *   radius:  var(--gcc-block-radius)   hoặc var(--gcc-card-radius)
 * ═══════════════════════════════════════════════════════════════════════════ */

.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-header,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-header {

  /* Layout — dùng biến chuẩn */
  margin:  var(--gcc-block-margin-y, 0.4em) var(--gcc-block-margin-x, 0.6em);
  padding: var(--gcc-block-pad-y, 0.3em) var(--gcc-block-pad-x, 1em);
  width: calc(100% - 2 * var(--gcc-block-margin-x, 0.6em));
  box-sizing: border-box;
  flex: 0 0 auto;

  /* Visual */
  background: #YOUR_HEADER_BG;
  text-align: center;
  border-radius: var(--gcc-block-radius, 0.7em);
  position: relative;
  z-index: 3;

  /* Animation — paused by default */
  animation: {slug}-main-kf 3.3s ease-out infinite;
  animation-play-state: paused;
  transform-origin: center;
}

/* FROM line */
.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-from,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-from {
  color: #YOUR_FROM_COLOR;
  font-size: var(--gcc-from-size, 0.78em);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}

/* Tuỳ chọn: emoji/icon trước dòng from */
/* .gcc-preview-card.gcc-tpl-{slug} .gcc-preview-from::before { content: "🎁 "; } */

/* TITLE */
.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-title,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-title {
  font-size: clamp(1em, 3.2cqi, var(--gcc-title-size, 1.3em));
  font-weight: 700;
  color: #YOUR_TITLE_COLOR;
  margin: 0;
  letter-spacing: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * MEDIA (vùng ảnh/video/3D)
 * ─────────────────────────────────────────────────────────────────────────
 * Frame set: flex: 1 1 auto, min-height: 0, aspect-ratio: 1/1 (fallback).
 * Template set: margin, padding, border-radius, background, box-shadow, animation.
 * KHÔNG set: flex, aspect-ratio, width/height tuyệt đối (để frame co dãn).
 * ═══════════════════════════════════════════════════════════════════════════ */

.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-media,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-media {
  margin: var(--gcc-block-margin-y, 0.4em) var(--gcc-block-margin-x, 0.6em);
  width: calc(100% - 2 * var(--gcc-block-margin-x, 0.6em));
  box-sizing: border-box;
  padding: 0;
  border-radius: var(--gcc-block-radius, 0.7em);
  background: #ffffff;
  position: relative;
  z-index: 3;
  overflow: hidden;

  animation: {slug}-main-kf 4.3s ease-out 0.45s infinite;
  animation-play-state: paused;
  transform-origin: center;
}

/* Image override — cover thay vì contain nếu muốn fill ô vuông */
.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-media img,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-media img {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * CAPTION (message text)
 * ═══════════════════════════════════════════════════════════════════════════ */

.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-caption,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-caption {
  margin:  var(--gcc-block-margin-y, 0.4em) var(--gcc-block-margin-x, 0.6em);
  padding: var(--gcc-block-pad-y, 0.5em) var(--gcc-block-pad-x, 1em);
  width: calc(100% - 2 * var(--gcc-block-margin-x, 0.6em));
  box-sizing: border-box;
  flex: 1 1 auto;   /* caption lấp phần còn lại */
  min-height: 0;
  overflow: hidden;

  font-size: var(--gcc-caption-size, 0.95em);
  line-height: 1.8;
  text-align: center;
  color: #YOUR_CAPTION_COLOR;
  background: #YOUR_CAPTION_BG;
  border-radius: var(--gcc-block-radius, 0.7em);
  position: relative;
  z-index: 3;

  animation: {slug}-main-kf 3.8s ease-out 0.22s infinite;
  animation-play-state: paused;
  transform-origin: center;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * VIDEO / AUDIO BLOCKS
 * ═══════════════════════════════════════════════════════════════════════════ */

.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-video,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-video,
.gcc-preview-card.gcc-tpl-{slug} .gcc-preview-audio,
.gcc-preview-card[data-template="{slug}"] .gcc-preview-audio {
  margin:  var(--gcc-block-margin-y, 1em) var(--gcc-block-margin-x, 0.6em);
  padding: var(--gcc-block-pad-y, 0.6em) var(--gcc-block-pad-x, 0.6em);
  width: calc(100% - 2 * var(--gcc-block-margin-x, 0.6em));
  box-sizing: border-box;
  flex: none;
  background: #ffffff;
  border-radius: var(--gcc-block-radius, 0.7em);
  position: relative;
  z-index: 3;
  overflow: hidden;

  animation: {slug}-main-kf 4.3s ease-out 0.45s infinite;
  animation-play-state: paused;
  transform-origin: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * ACTIVATE ANIMATIONS  ← :hover / .gcc-active / .gcc-preview-active
 * ─────────────────────────────────────────────────────────────────────────
 * Khai báo 1 lần tất cả animated elements ở đây.
 * ═══════════════════════════════════════════════════════════════════════════ */

.gcc-preview-card.gcc-tpl-{slug}:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-header,
.gcc-preview-card[data-template="{slug}"]:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-header,
.gcc-preview-card.gcc-tpl-{slug}:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-caption,
.gcc-preview-card[data-template="{slug}"]:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-caption,
.gcc-preview-card.gcc-tpl-{slug}:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-media,
.gcc-preview-card[data-template="{slug}"]:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-media,
.gcc-preview-card.gcc-tpl-{slug}:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-video,
.gcc-preview-card[data-template="{slug}"]:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-video,
.gcc-preview-card.gcc-tpl-{slug}:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-audio,
.gcc-preview-card[data-template="{slug}"]:is(:hover, .gcc-active, .gcc-preview-active) .gcc-preview-audio {
  animation-play-state: running;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * LAYOUT EXTRAS — clip-path, pseudo-elements, decorations (tuỳ chọn)
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Ví dụ: header hình lục giác (ribbon layout)
 * .gcc-preview-card.gcc-tpl-{slug} .gcc-preview-header {
 *   clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%,
 *                       calc(100% - 20px) 100%, 20px 100%, 0 50%);
 * }
 */

/*
 * Ví dụ: sparkle overlay trên caption
 * .gcc-preview-card.gcc-tpl-{slug} .gcc-preview-caption::after {
 *   content: "";
 *   position: absolute;
 *   top: 0.5em; left: 0.5em;
 *   pointer-events: none;
 *   width: 2px; height: 2px; border-radius: 50%;
 *   box-shadow: 80px 40px 0 #fff, 160px 70px 0 #ffd700, 240px 30px 0 #fff;
 *   animation: {slug}-accent-kf 1.8s ease-in-out infinite;
 *   animation-play-state: paused;
 * }
 * .gcc-preview-card.gcc-tpl-{slug}:is(:hover,.gcc-active,.gcc-preview-active) .gcc-preview-caption::after {
 *   animation-play-state: running;
 * }
 */


/* ═══════════════════════════════════════════════════════════════════════════
 * REDUCED MOTION — LUÔN ĐẶT Ở CUỐI FILE
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .gcc-preview-card.gcc-tpl-{slug} *,
  .gcc-preview-card[data-template="{slug}"] * {
    animation: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * VÍ DỤ HOÀN CHỈNH — slug: "cherry-blossom"
 * Uncomment và dùng như reference khi thiết kế template thực tế.
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * @keyframes cb-float-kf {
 *   0%, 100% { transform: translateY(0) rotate(0deg); }
 *   33%      { transform: translateY(-4px) rotate(2deg); }
 *   66%      { transform: translateY(2px) rotate(-1deg); }
 * }
 *
 * .gcc-preview-card.gcc-tpl-cherry-blossom,
 * .gcc-preview-card[data-template="cherry-blossom"] {
 *   background: linear-gradient(160deg, #fce4ec 0%, #fff 60%, #fce4ec 100%);
 *   color: #4a1030;
 *   font-family: 'Playfair Display', 'Noto Serif', serif;
 *   position: relative;
 *   overflow: hidden !important;
 *   border: 2px solid #f48fb1;
 * }
 *
 * .gcc-preview-card.gcc-tpl-cherry-blossom .gcc-preview-header,
 * .gcc-preview-card[data-template="cherry-blossom"] .gcc-preview-header {
 *   margin:  var(--gcc-block-margin-y, 0.4em) var(--gcc-block-margin-x, 0.6em);
 *   padding: var(--gcc-block-pad-y, 0.4em) var(--gcc-block-pad-x, 1em);
 *   width: calc(100% - 2 * var(--gcc-block-margin-x, 0.6em));
 *   box-sizing: border-box; flex: 0 0 auto;
 *   background: #fff0f6;
 *   border-radius: 999px;
 *   text-align: center;
 *   z-index: 3; position: relative;
 *   animation: cb-float-kf 3s ease-in-out infinite;
 *   animation-play-state: paused;
 * }
 *
 * [... tiếp tục với .gcc-preview-from, .gcc-preview-title, .gcc-preview-caption ...]
 *
 * @media (prefers-reduced-motion: reduce) {
 *   .gcc-preview-card.gcc-tpl-cherry-blossom *,
 *   .gcc-preview-card[data-template="cherry-blossom"] * { animation: none !important; }
 * }
 */