/* ==========================================================================
   Hiking Care Pro - archetypes.css
   Trail archetype cards & kit bundle styles.
   ========================================================================== */

.hkc-archetypes-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	gap:18px;
	margin-bottom:36px;
}
.hkc-archetype-card{
	background:var(--hkc-surface);
	border:1.5px solid var(--hkc-border);
	border-radius:18px;
	padding:22px 22px 18px;
	text-align:left;
	font-family:var(--hkc-font-sans);
	color:var(--hkc-text);
	cursor:pointer;
	transition:transform .25s, border-color .2s, box-shadow .2s;
	display:flex; flex-direction:column; gap:8px;
	position:relative;
	overflow:hidden;
}
.hkc-archetype-card::before{
	content:""; position:absolute; inset:0;
	background:radial-gradient(circle at top right, rgba(221,161,94,.18), transparent 60%);
	opacity:0; transition:opacity .25s;
}
.hkc-archetype-card:hover{ transform:translateY(-4px); border-color:var(--hkc-accent); box-shadow:var(--hkc-shadow); }
.hkc-archetype-card:hover::before{ opacity:1; }
.hkc-archetype-card.is-active{ border-color:var(--hkc-primary); box-shadow:0 0 0 3px rgba(27,67,50,.18); }

.hkc-archetype-icon{ font-size:2rem; }
.hkc-archetype-title{ font-family:var(--hkc-font-display); font-weight:700; font-size:1.1rem; color:var(--hkc-dark); }
html[data-hkc-theme="dark"] .hkc-archetype-title{ color:var(--hkc-warm); }
.hkc-archetype-tagline{ color:var(--hkc-text-muted); font-size:.92rem; margin-bottom:8px; }
.hkc-archetype-meta{ list-style:none; padding:0; margin:0 0 8px; display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--hkc-text-muted); }
.hkc-archetype-meta strong{ color:var(--hkc-text); font-weight:600; }
.hkc-archetype-cta{ display:inline-block; margin-top:auto; font-family:var(--hkc-font-display); font-weight:600; font-size:.88rem; color:var(--hkc-primary); }

.hkc-archetype-detail{
	background:var(--hkc-surface);
	border:1px solid var(--hkc-border);
	border-radius:var(--hkc-radius-lg);
	padding:32px;
	margin-top:24px;
	position:relative;
	box-shadow:var(--hkc-shadow);
	animation:hkc-arch-in .35s ease;
}
@keyframes hkc-arch-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.hkc-archetype-detail-close{
	position:absolute; top:14px; right:14px;
	width:36px; height:36px; border-radius:50%;
	border:1px solid var(--hkc-border);
	background:var(--hkc-surface);
	font-size:1.4rem; line-height:1;
}
.hkc-archetype-detail-header{ display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.hkc-archetype-detail-header h3{ margin:0 0 .25em; font-size:1.5rem; }
.hkc-archetype-detail-header p{ color:var(--hkc-text-muted); margin:0; }
.hkc-archetype-detail-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-bottom:18px; }
.hkc-archetype-detail-grid div{ background:var(--hkc-surface-2); border-radius:12px; padding:14px 16px; }
.hkc-archetype-detail-grid dt{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hkc-text-muted); font-weight:600; margin-bottom:4px; }
.hkc-archetype-detail-grid dd{ margin:0; font-weight:600; }
.hkc-archetype-detail-gear{ margin:18px 0; }
.hkc-archetype-detail-gear h4{ font-size:.95rem; margin-bottom:8px; }
.hkc-archetype-detail-gear ul{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.hkc-archetype-detail-gear li{ background:var(--hkc-surface-2); padding:6px 12px; border-radius:999px; font-size:.85rem; }

/* KIT BUNDLES */
.hkc-kits-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
	gap:18px;
}
.hkc-kit-card{
	background:var(--hkc-surface);
	border:1px solid var(--hkc-border);
	border-radius:var(--hkc-radius-lg);
	padding:24px;
	display:flex; flex-direction:column; gap:14px;
	transition:transform .25s, box-shadow .25s;
	position:relative;
	overflow:hidden;
}
.hkc-kit-card::before{
	content:""; position:absolute; top:0; left:0; right:0; height:4px;
	background:linear-gradient(90deg, var(--hkc-primary), var(--hkc-accent));
}
.hkc-kit-card:hover{ transform:translateY(-4px); box-shadow:var(--hkc-shadow); }
.hkc-kit-card-header{ display:flex; gap:12px; align-items:center; padding-top:8px; }
.hkc-kit-icon{ width:48px; height:48px; border-radius:14px; background:var(--hkc-surface-2); display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; }
.hkc-kit-title{ font-size:1.1rem; margin:0; }
.hkc-kit-tagline{ color:var(--hkc-text-muted); font-size:.88rem; margin:.2em 0 0; }
.hkc-kit-meta{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.hkc-kit-meta div{ background:var(--hkc-surface-2); border-radius:10px; padding:8px; }
.hkc-kit-meta dt{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--hkc-text-muted); font-weight:600; margin-bottom:2px; }
.hkc-kit-meta dd{ margin:0; font-size:.85rem; font-weight:600; }
.hkc-kit-items summary{ cursor:pointer; padding:10px 12px; background:var(--hkc-surface-2); border-radius:10px; font-weight:600; font-size:.9rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.hkc-kit-items summary::-webkit-details-marker{ display:none; }
.hkc-kit-items ul{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:6px; }
.hkc-kit-items li{ display:flex; justify-content:space-between; gap:8px; align-items:center; padding:8px 12px; background:var(--hkc-surface-2); border-radius:8px; font-size:.88rem; }
.hkc-kit-cta{ align-self:flex-start; margin-top:auto; }