/* tuetransoftware-web-v2 / templates.css  (templates.html, template.html)
   The template library and one template, inside the Phòng tối gallery:
   the real template hangs in its room colour; price, modules and actions sit
   on plain wall, never on a picture. Colours come from theme.css tokens. */

/* ---------- templates.html: list (the filter bar .filters is in v2-theme.css) ---------- */
.tlist { padding-bottom: 48px; }

/* ---------- templates.html: cards ---------- */
.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tcard { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.tcard.real { background: var(--room-1); }
.tc-stage { margin: 24px 24px 0; }
.tc-empty {
  display: grid; place-items: center; flex: 1; aspect-ratio: 2.1 / 1; padding: 16px; text-align: center; font-size: calc(var(--fs-b) * 14 / 16); color: var(--fg-2);
  box-shadow: inset 0 0 0 1px var(--fg-2); border-radius: 8px;
}
.tc-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.tc-name { font-size: calc(var(--fs-b) * 17 / 16); font-weight: 600; font-stretch: 112%; }
.tc-body .price { margin-top: 4px; }
/* what the first-year figure holds and what the next year costs (owner 02/11/2026): a small line under the figure, on the list card and the sample page */
.price-terms { display: block; margin-top: 4px; font-size: calc(var(--fs-b) * 13 / 16); font-weight: 400; color: var(--fg-2); }
.tc-body .actions { margin-top: auto; padding-top: 8px; }
.tc-body .btn { white-space: normal; text-align: left; }

/* one template only: the card is the room */
.tgrid[data-count="1"] { grid-template-columns: 1fr; }
.tgrid[data-count="1"] .tcard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding: 48px; }
.tgrid[data-count="1"] .tc-stage { grid-column: 1 / 8; margin: 0; }
.tgrid[data-count="1"] .tc-body { grid-column: 9 / 13; padding: 0; }
.tgrid[data-count="1"] .tc-name { font-size: calc(var(--fs-h3) * 22 / 26); font-weight: 400; font-stretch: 116%; }

@media (max-width: 1099px) {
  .tgrid { grid-template-columns: 1fr 1fr; }
  .tgrid[data-count="1"] .tcard { display: flex; flex-direction: column; align-items: stretch; padding: 32px; }
}
@media (max-width: 699px) {
  /* a card is a thumbnail: wide and phone stay side by side, none hidden */
  .tc-stage { flex-direction: row; align-items: flex-start; --g: 12px; }
  .tc-stage .ly { flex: 0 0 calc((100% - var(--g)) * .7761); width: auto; }
  .tc-stage .ly.ph { flex-basis: calc((100% - var(--g)) * .2239); width: auto; border-radius: 12px; }
  .tgrid { grid-template-columns: 1fr; gap: 16px; }
  .tc-stage { margin: 16px 16px 0; }
  .tc-body { padding: 20px 16px 24px; }
  .tgrid[data-count="1"] .tcard { padding: 16px 16px 24px; gap: 20px; }
  .tgrid[data-count="1"] .tc-name { font-size: calc(var(--fs-h3) * 22 / 26); }
  .tc-body .actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- templates.html: "no template fits" ---------- */
.ask { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding-top: 48px; padding-bottom: 48px; margin-bottom: 48px; border-top: 1px solid var(--line); }
.ask-copy { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 24px; }
.ask-frame { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 16px; }
.ask-frame .empty-box { aspect-ratio: 4 / 3; }
@media (max-width: 1099px) { .ask-copy { grid-column: 1 / 13; } .ask-frame { grid-column: 1 / 7; } }
@media (max-width: 699px) {
  .ask { display: block; margin-bottom: 0; }
  .ask-copy { gap: 20px; }
  .ask .actions { flex-direction: column; align-items: stretch; }
  .ask .btn { white-space: normal; }
  .ask-frame { margin-top: 32px; }
  .ask-frame .empty-box { aspect-ratio: 16 / 10; }
}

/* ---------- template.html: head ---------- */
.thead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.th-copy { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 16px; }
.th-copy .crumbs { margin-bottom: 0; }
.th-copy .lead { margin-top: 0; }
.tag-price { padding-top: 12px; border-top: 1px solid var(--line); }
.th-stage { grid-column: 6 / 13; }
@media (max-width: 1099px) {
  .th-copy { grid-column: 1 / 13; }
  .th-stage { grid-column: 1 / 13; margin-top: 40px; }
}
@media (max-width: 699px) {
  .th-copy { display: contents; }
  .thead { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .thead .crumbs { order: 1; }
  .thead > .th-copy > .kind { order: 2; }
  .thead h1 { order: 3; }
  .thead .tag-price { order: 4; }
  .thead .th-copy > .actions { order: 5; display: grid; grid-template-columns: 1fr; gap: 8px; }
  .th-stage { order: 6; margin-top: 16px; }
  .thead .lead { order: 7; margin-top: 24px; }
}

/* ---------- template.html: modules and packages ---------- */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.mods li { display: flex; flex-direction: column; gap: 6px; padding: 20px 0 24px; border-top: 1px solid var(--line); }
.mods h3, .pcard h3 { font-size: calc(var(--fs-b) * 17 / 16); font-weight: 600; font-stretch: 112%; }
.mods p { font-size: calc(var(--fs-b) * 15 / 16); color: var(--fg-2); }
.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pcard { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 6px; background: var(--bg-2); font-size: calc(var(--fs-b) * 15 / 16); }
.pcard > p:not(.kind):not(.price) { color: var(--fg-2); }
.pcard .kind + h3 { margin-top: -4px; }
.inc { display: grid; gap: 6px; }
.inc li { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: baseline; }
.inc li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-2); transform: translateY(-2px); }
.pcard .price { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.pcard .price strong { font-size: calc(var(--fs-h3) * 22 / 26); }
@media (max-width: 1099px) { .mods { grid-template-columns: 1fr 1fr; } .pkgs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .mods, .pkgs { grid-template-columns: 1fr; } .pkgs { gap: 16px; } }

/* ---------- template.html: closing room ---------- */
.tcta { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin: 48px 0; padding-top: 48px; padding-bottom: 48px; background: var(--room-1); }
.tcta .price { font-size: var(--fs-b); color: var(--fg); }
@media (max-width: 699px) { .tcta { margin-bottom: 0; } .tcta .actions { flex-direction: column; align-items: stretch; width: 100%; } .tcta .btn { white-space: normal; } }