/**
 * gcc-free-card.css — Thiệp THIẾT KẾ TỰ DO.
 *
 * NẠP Ở CẢ HAI NƠI: trang soạn (create.html) và trang người nhận (card.html).
 * Thiệp tự do gần như không có markup riêng — nội dung của nó là lớp phần tử
 * (gcc-stickers.css). Tệp này chỉ lo NỀN và vài nền dựng sẵn.
 *
 * NỀN LÀ TỆP TRONG KHO MÃ, không phải dữ liệu admin nhập: id nền đi thẳng vào
 * tên class trên trang người nhận, cùng quy tắc với mẫu thiệp và hoạt cảnh mở.
 */

/* Thẻ thiệp tự do: bỏ hết padding và trang trí của thẻ thường — người dùng tự
   đặt mọi thứ, mép thẻ phải là mép thật. */
/* Đặc hiệu phải THẮNG `.gcc-col--preview .gcc-preview-card` (0,2,0) của
   gcc-live-preview.css và gcc-generate-card-preview-base.css — hai tệp ấy đặt
   nền trắng cho MỌI thẻ trong cột xem trước. Đo được trên trang thật: biến
   --gcc-fbg đúng #14161c mà thẻ vẫn trắng tinh. Nâng đặc hiệu bằng cách viết
   đủ ngữ cảnh (0,3,0), KHÔNG dùng !important: cái đó chỉ đẩy cuộc tranh chấp
   sang chỗ khác.

   PHẢI có ĐỦ CẢ HAI ngữ cảnh: `.gcc-col--preview` là khung soạn, còn
   `.gcc-view-standalone` là trang NGƯỜI NHẬN — mỗi trang có một luật nền
   trắng riêng. Viết một vế thôi thì thiệp đúng ở bên này và sai ở bên kia, mà
   bên sai lại là bên người nhận. Đo được: nền hồng lúc soạn, mở link ra trắng
   tinh. Đây đúng loại lệch mà webapp/tools/kiem-css-doi-xung.js canh. */
.gcc-col--preview .gcc-preview-card.gcc-free-card,
.gcc-view-standalone .gcc-preview-card.gcc-free-card,
.gcc-preview-card.gcc-free-card,
.gcc-free-card {
    padding: 0;
    overflow: hidden;
    display: block;
    background: var(--gcc-fbg, #f7f4ec);
}

/* KHỔ MẶC ĐỊNH khi người dùng chưa chọn gì trong công cụ Size.
   Thiệp thường cao theo nội dung của nó; thiệp tự do thì KHÔNG CÓ nội dung
   trong luồng — mọi phần tử đều absolute — nên không có gì chống đỡ chiều cao
   và canvas dẹt lép còn đúng một dòng chữ. Đo được trên trang thật: thẻ
   796×95px, không đặt nổi một phần tử nào cho ra hồn.
   `gcc-has-aspect` do vendor/js/gcc-ratio.js gắn khi người dùng đã chọn khổ —
   lúc ấy nhường hẳn quyền cho nó, đây chỉ là mức lùi. */
.gcc-col--preview .gcc-preview-card.gcc-free-card:not(.gcc-has-aspect),
.gcc-view-standalone .gcc-preview-card.gcc-free-card:not(.gcc-has-aspect),
.gcc-preview-card.gcc-free-card:not(.gcc-has-aspect),
.gcc-free-card:not(.gcc-has-aspect) {
    aspect-ratio: 4 / 5;
    height: auto;
}

/* Lớp ảnh nền nằm DƯỚI mọi phần tử. Không dùng background của chính thẻ: thẻ
   còn mang màu nền dựng sẵn, và cần cả hai chồng lên nhau (ảnh mờ trên màu). */
/* Chọn theo CON TRỰC TIẾP của thẻ (đặc hiệu 0,2,0) chứ không chỉ tên lớp
   (0,1,0): theme-switcher.css có luật `.gcc-preview-card > *` (0,1,1) đặt
   position:relative cho MỌI con của thẻ, và luật đó thắng. Đo được trên trang
   thật: lời nhắc chỗ trống rơi RA NGOÀI thẻ, nằm phía trên nó 35px. Cùng cái
   bẫy đã làm lớp trang trí mất absolute — xem gcc-stickers.css. */
.gcc-preview-card > .gcc-free-bg,
.gcc-free-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Lời nhắc khi thẻ chưa có phần tử nào. Thẻ đã có phần tử thì lớp
   .gcc-free-card--co-nd (do trang gắn) ẩn nó đi. */
.gcc-preview-card > .gcc-free-hint,
.gcc-free-hint {
    position: absolute;
    inset: auto 8% 8% 8%;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, .45);
    z-index: 1;
    pointer-events: none;
}
.gcc-free-card--co-nd .gcc-free-hint { display: none; }

/* ── Nền dựng sẵn ────────────────────────────────────────────────────────────
   Thêm một nền = thêm một luật ở đây và một dòng trong js/gcc-free-nen.js.
   Giữ hai chỗ vì một bên là hình, một bên là nhãn hiện cho người dùng. */
.gcc-fbg-f-paper  { --gcc-fbg: #f7f4ec; }
.gcc-fbg-f-white  { --gcc-fbg: #ffffff; }
.gcc-fbg-f-ink    { --gcc-fbg: #14161c; }
.gcc-fbg-f-blush  { --gcc-fbg: #f7e6e6; }
.gcc-fbg-f-sage   { --gcc-fbg: #e6ede4; }
.gcc-fbg-f-sky    { --gcc-fbg: #e4edf7; }
.gcc-fbg-f-sand   { --gcc-fbg: #efe3d2; }
.gcc-fbg-f-gold   { --gcc-fbg: #1c1a14; }

/* NỀN TỐI — mực trắng.
   Ba nền dựng sẵn tối màu, và mọi màu tự chọn có độ sáng thấp đều được trang
   gắn thêm .gcc-free-toi (js/gcc-card-view.js và js/gcc-free-card.js tính bằng
   cùng một công thức). Không liệt kê tay từng nền ở đây: thêm một nền tối mới
   là quên ngay, mà quên thì chữ đen nằm trên nền đen — chỉ người NHẬN thấy. */
.gcc-fbg-f-ink .gcc-free-hint,
.gcc-fbg-f-gold .gcc-free-hint,
.gcc-free-toi .gcc-free-hint { color: rgba(255, 255, 255, .5); }

/* Nền chuyển sắc — vẫn là tệp trong kho mã, không phải màu người dùng gõ. */
.gcc-fbg-f-dawn   { --gcc-fbg: linear-gradient(160deg, #ffd9c0 0%, #f7c8dd 55%, #d7c8f7 100%); }
.gcc-fbg-f-night  { --gcc-fbg: linear-gradient(160deg, #1b2540 0%, #2d1f4a 60%, #3d2036 100%); }
.gcc-fbg-f-night .gcc-free-hint { color: rgba(255, 255, 255, .5); }

/* Chữ ký chân thiệp (js/gcc-signature.js) là con TRONG LUỒNG của thẻ. Thiệp
   thường có nội dung đẩy nó xuống đáy; thiệp tự do thì mọi phần tử đều
   absolute, nên nó là con duy nhất còn trong luồng và nhảy lên ĐỈNH thẻ — đo
   được: chữ ký nằm cách mép trên 45px, chắn ngay chỗ đặt tiêu đề. */
.gcc-free-card > .gcc-signature {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    z-index: 6;          /* trên lớp phần tử, để không bị hình dán che mất */
}

/* Chữ ký trên nền tối: mực mặc định là xám đậm, đặt lên nền #14161c thì gần
   như tàng hình — đo trên trang thật, dòng email và ngày chỉ còn là vệt mờ.
   Đổi cả màu chữ lẫn màu đường kẻ, vì hai thứ ấy vẽ bằng hai thuộc tính khác
   nhau và sửa một cái thì cái kia vẫn mất hút. */
.gcc-free-toi > .gcc-signature,
.gcc-fbg-f-ink > .gcc-signature,
.gcc-fbg-f-gold > .gcc-signature,
.gcc-fbg-f-night > .gcc-signature {
    color: rgba(255, 255, 255, .62);
    border-top-color: rgba(255, 255, 255, .18);
}

.gcc-free-toi > .gcc-signature *,
.gcc-fbg-f-ink > .gcc-signature *,
.gcc-fbg-f-gold > .gcc-signature *,
.gcc-fbg-f-night > .gcc-signature * { color: inherit; }