/*
===========================================
Wander Wise Pro - Design System
This is the ONLY file that should define :root variables.
Every other stylesheet consumes them via var(--name).
===========================================
*/

:root{
	--primary:#0F766E;
	--primary-dark:#0b5f59;
	--text:#1A1A1A;
	--muted:#5B6472;
	--bg:#ffffff;
	--container:1280px;
	--radius:20px;
	--shadow:0 20px 50px rgba(0,0,0,.08);
	--transition:.3s ease;
	--hero-height:80vh;
}

/* ===========================
RESET
=========================== */

*,
*::before,
*::after{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

body{
	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color:var(--text);
	background:var(--bg);
	line-height:1.6;
}

img{
	max-width:100%;
	display:block;
}

a{
	text-decoration:none;
	color:inherit;
}

ul, ol{
	list-style:none;
}

button, input, select, textarea{
	font:inherit;
	outline:none;
}

/* ===========================
Layout
=========================== */

.ww-container{
	max-width:var(--container);
	margin:auto;
	padding:0 20px;
}

.ww-section{
	padding:100px 0;
}

/* ===========================
Typography
=========================== */

h1, h2, h3, h4, h5{
	color:var(--text);
	font-weight:700;
	line-height:1.2;
}

h1{ font-size:56px; }
h2{ font-size:38px; }
h3{ font-size:22px; }

p{
	color:var(--muted);
	font-size:16px;
}

.ww-section-heading{
	text-align:center;
	margin-bottom:50px;
}

.ww-section-heading h2{
	margin-bottom:12px;
}

.ww-section-heading p{
	max-width:650px;
	margin:auto;
}

/* ===========================
Buttons
=========================== */

.ww-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:16px 32px;
	border:none;
	border-radius:999px;
	background:var(--primary);
	color:#fff;
	font-weight:600;
	cursor:pointer;
	transition:var(--transition);
}

.ww-button:hover{
	transform:translateY(-3px);
	background:var(--primary-dark);
}

.ww-button-secondary{
	background:transparent;
	color:#fff;
	border:2px solid rgba(255,255,255,.6);
}

.ww-button-secondary:hover{
	background:#fff;
	color:var(--primary);
	border-color:#fff;
}

/* ===========================
Card (base, shared by every CPT card)
=========================== */

.ww-card{
	position:relative;
	background:#fff;
	border-radius:var(--radius);
	overflow:hidden;
	box-shadow:var(--shadow);
	transition:var(--transition);
}

.ww-card:hover{
	transform:translateY(-10px);
}

.ww-card-image{
	position:relative;
	display:block;
	height:220px;
	overflow:hidden;
}

.ww-card-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:var(--transition);
}

.ww-card:hover .ww-card-image img{
	transform:scale(1.08);
}

.ww-card-content{
	padding:24px;
}

.ww-card-content h3{
	margin-bottom:8px;
}

.ww-card-link{
	display:inline-block;
	margin-top:12px;
	color:var(--primary);
	font-weight:600;
}

.ww-rating-badge{
	position:absolute;
	top:14px;
	right:14px;
	background:rgba(0,0,0,.6);
	color:#fff;
	padding:6px 14px;
	border-radius:999px;
	font-size:13px;
	font-weight:600;
}

.ww-badge{
	position:absolute;
	top:14px;
	left:14px;
	background:var(--primary);
	color:#fff;
	padding:6px 14px;
	border-radius:999px;
	font-size:13px;
	font-weight:600;
}

.ww-location{
	font-size:13px;
	font-weight:600;
	color:var(--muted);
}

/* Global Grid */
 
.ww-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:32px;
    align-items:stretch;
}
 
@media(max-width:768px){
    .ww-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

/* ==========================
   Icons
========================== */
 
.ww-icon{
    width:20px;
    height:20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:8px;
    vertical-align:middle;
}
 
.ww-icon svg{
    width:20px;
    height:20px;
    display:block;
 
    fill:currentColor;
    stroke:currentColor;
}
 
.ww-card:hover .ww-icon{
    background:var(--primary);
    color:#fff;
}