/* ==========================================================================
   Content page templates: Giới thiệu (template-about.php),
   Liên hệ (template-contact.php), Bộ sưu tập (template-collections.php).
   Loaded only on those templates — see inc/enqueue.php.
   ========================================================================== */

.sk-breadcrumb { margin-bottom: var(--sk-space-4); font-size: var(--sk-text-sm); color: var(--sk-muted); }
.sk-breadcrumb a { color: inherit; }
.sk-breadcrumb a:hover { color: var(--sk-accent); }

/* --- Dark page hero (about) --------------------------------------------- */
.sk-page-hero { background: var(--sk-navy); color: #fff; }
.sk-page-hero__inner { padding-block: var(--sk-space-16); max-width: 820px; }
@media (min-width: 1024px) {
	.sk-page-hero__inner { padding-block: var(--sk-space-24); }
}
.sk-page-hero__eyebrow { display: inline-block; margin: 0 0 var(--sk-space-4); padding: 0.25rem 0.625rem; border-radius: var(--sk-radius-sm); background: var(--sk-accent); font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sk-page-hero__title { margin: 0; color: #fff; font-size: var(--sk-text-3xl); line-height: var(--sk-leading-tight); text-transform: uppercase; }
@media (min-width: 768px) {
	.sk-page-hero__title { font-size: var(--sk-text-5xl); }
}
.sk-page-hero__lead { margin: var(--sk-space-4) 0 0; max-width: 60ch; color: rgba(255, 255, 255, 0.75); font-size: var(--sk-text-lg); }
.sk-page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sk-space-3); margin-top: var(--sk-space-8); }

/* --- About: story, stats, values ---------------------------------------- */
.sk-about-story__inner { display: grid; gap: var(--sk-space-6); }
@media (min-width: 1024px) {
	.sk-about-story__inner { grid-template-columns: 1fr 1.6fr; gap: var(--sk-space-16); }
}
.sk-about-story__title { margin: 0; font-size: var(--sk-text-2xl); text-transform: uppercase; }
.sk-about-story__content { font-size: var(--sk-text-lg); }

.sk-about-stats { background: var(--sk-surface); }
.sk-about-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sk-space-6); margin: 0; padding-block: var(--sk-space-12); }
@media (min-width: 768px) {
	.sk-about-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.sk-about-stats__item { display: flex; flex-direction: column; gap: var(--sk-space-1); }
.sk-about-stats__value { color: var(--sk-accent-dark); font-size: var(--sk-text-3xl); font-weight: 800; line-height: 1; }
.sk-about-stats__label { margin: 0; color: var(--sk-muted); font-size: var(--sk-text-sm); }

.sk-about-values__grid { display: grid; gap: var(--sk-space-4); }
@media (min-width: 768px) {
	.sk-about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.sk-about-values__grid { grid-template-columns: repeat(4, 1fr); }
}
.sk-about-values__card { padding: var(--sk-space-6); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); background: var(--sk-paper); }
.sk-about-values__num { color: var(--sk-accent); font-size: var(--sk-text-sm); font-weight: 800; }
.sk-about-values__title { margin: var(--sk-space-3) 0 var(--sk-space-2); font-size: var(--sk-text-lg); }
.sk-about-values__desc { margin: 0; color: var(--sk-muted); font-size: var(--sk-text-sm); }

/* --- Contact ------------------------------------------------------------ */
.sk-contact__header { margin-bottom: var(--sk-space-8); }
.sk-contact__title { font-size: var(--sk-text-3xl); text-transform: uppercase; }
.sk-contact__intro { max-width: 60ch; color: var(--sk-muted); font-size: var(--sk-text-lg); }

.sk-contact__grid { display: grid; gap: var(--sk-space-8); align-items: start; }
@media (min-width: 1024px) {
	.sk-contact__grid { grid-template-columns: 1fr 1fr; gap: var(--sk-space-12); }
}
.sk-contact__channels { display: grid; gap: var(--sk-space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) {
	.sk-contact__channels { grid-template-columns: repeat(2, 1fr); }
}
.sk-contact__channel { display: flex; flex-direction: column; gap: var(--sk-space-1); height: 100%; padding: var(--sk-space-5); border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); color: var(--sk-ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.sk-contact__channel:hover { border-color: var(--sk-accent); box-shadow: var(--sk-shadow-md); }
.sk-contact__channel-label { color: var(--sk-accent); font-size: var(--sk-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sk-contact__channel-value { font-size: var(--sk-text-lg); font-weight: 700; overflow-wrap: anywhere; }
.sk-contact__channel-note { color: var(--sk-muted); font-size: var(--sk-text-sm); }

.sk-contact__form-card { padding: var(--sk-space-6); border-radius: var(--sk-radius-xl); background: var(--sk-surface); }
@media (min-width: 768px) {
	.sk-contact__form-card { padding: var(--sk-space-10); }
}
.sk-contact__form-title { margin: 0 0 var(--sk-space-2); font-size: var(--sk-text-xl); }
.sk-contact__form-desc { margin: 0 0 var(--sk-space-6); color: var(--sk-muted); }
.sk-contact__form-card .sk-field { background: var(--sk-paper); }
.sk-contact__form-card .sk-modal__success { color: var(--sk-accent); text-align: center; }
.sk-contact__form-card .sk-modal__success p { color: var(--sk-ink); font-weight: 600; }

/* --- Collections index -------------------------------------------------- */
.sk-collections__grid { display: grid; gap: var(--sk-space-6); }
@media (min-width: 640px) {
	.sk-collections__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.sk-collections__grid { grid-template-columns: repeat(3, 1fr); }
}
.sk-collection-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--sk-line); border-radius: var(--sk-radius-lg); color: var(--sk-ink); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.sk-collection-card:hover { box-shadow: var(--sk-shadow-md); transform: translateY(-2px); }
.sk-collection-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sk-surface); }
.sk-collection-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.sk-collection-card:hover .sk-collection-card__media img { transform: scale(1.04); }
.sk-collection-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sk-space-2); padding: var(--sk-space-5); }
.sk-collection-card__title { margin: 0; font-size: var(--sk-text-xl); }
.sk-collection-card__desc { margin: 0; color: var(--sk-muted); font-size: var(--sk-text-sm); }
.sk-collection-card__meta { margin-top: auto; padding-top: var(--sk-space-2); color: var(--sk-accent); font-size: var(--sk-text-sm); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.sk-collection-card,
	.sk-collection-card__media img { transition: none; }
	.sk-collection-card:hover,
	.sk-collection-card:hover .sk-collection-card__media img { transform: none; }
}