/* ===========================================================================
   Ambary Gardens — Home v2
   Save as: wp-content/themes/Divi-child/css/home-v2.css
   Enqueue only on the Home v2 template (see functions.php snippet).
   ===========================================================================*/

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   Define once here, reuse on every future template. When you eventually
   rebuild product and category pages, you pull from this same set and the
   whole site stays consistent without a page builder.
   -------------------------------------------------------------------------*/
.ag-home {
	--ag-deep:      #1d4a45;  /* primary brand teal — headings, solid buttons */
	--ag-deep-soft: #2c5f59;  /* tinted panels on the deep background         */
	--ag-mint:      #d9ece8;  /* pale section background                      */
	--ag-cream:     #faf6ee;  /* warm off-white section background            */
	--ag-clay:      #c8663f;  /* accent — eyebrows only, never body text      */
	--ag-ink:       #23302e;  /* body copy                                    */
	--ag-ink-mute:  #5c6b68;  /* secondary copy                               */

	/* Type. Divi loads Open Sans; the serif is the one addition.
	   Swap the stacks if you license something better. */
	--ag-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--ag-sans:  "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Spacing scale — everything is a multiple of these, no arbitrary values */
	--ag-s1: 0.5rem;
	--ag-s2: 1rem;
	--ag-s3: 1.5rem;
	--ag-s4: 2.5rem;
	--ag-s5: 4rem;
	--ag-s6: 6rem;

	--ag-radius: 14px;
	--ag-max:    1240px;

	color: var(--ag-ink);
	font-family: var(--ag-sans);
}

/* ---------------------------------------------------------------------------
   2. SHARED PIECES
   -------------------------------------------------------------------------*/
.ag-home * { box-sizing: border-box; }

.ag-display {
	font-family: var(--ag-serif);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ag-deep);
	margin: 0 0 var(--ag-s3);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
}
.ag-display--md { font-size: clamp(2rem, 4vw, 3rem); }

.ag-eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ag-clay);
	margin: 0 0 var(--ag-s2);
}
.ag-eyebrow--light { color: #e8b79c; }

.ag-lede {
	font-size: 1.075rem;
	line-height: 1.65;
	color: var(--ag-ink-mute);
	max-width: 46ch;
	margin: 0 0 var(--ag-s4);
}

.ag-actions { display: flex; gap: var(--ag-s2); flex-wrap: wrap; }

.ag-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ag-s1);
	padding: 0.95rem 1.9rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	transition: transform 0.15s ease, background-color 0.15s ease;
}
.ag-btn:hover { transform: translateY(-1px); }
.ag-btn:focus-visible { outline: 3px solid var(--ag-clay); outline-offset: 3px; }

.ag-btn--solid { background: var(--ag-deep); color: #fff; }
.ag-btn--solid:hover { background: #163b37; color: #fff; }

.ag-btn--ghost {
	background: transparent;
	color: var(--ag-deep);
	border: 1.5px solid var(--ag-deep);
}
.ag-btn--light { background: #fff; color: var(--ag-deep); }

.ag-textlink {
	font-weight: 700;
	color: var(--ag-deep);
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   3. SECTIONS
   Padding lives on .ag-section only. Background modifiers never touch
   spacing — that's what stops the specificity fights.
   -------------------------------------------------------------------------*/
.ag-section {
	padding: var(--ag-s6) var(--ag-s4);
}
.ag-section > * {
	max-width: var(--ag-max);
	margin-inline: auto;
}
.ag-section--cream { background: var(--ag-cream); }
.ag-section--mint  { background: var(--ag-mint); }
.ag-section--deep  { background: var(--ag-deep); }

.ag-section--deep .ag-display,
.ag-section--deep .ag-lede,
.ag-section--deep h3 { color: #fff; }
.ag-section--deep .ag-lede { color: rgba(255,255,255,0.82); }

.ag-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--ag-s3);
	margin-bottom: var(--ag-s5);
	flex-wrap: wrap;
}
.ag-section__head .ag-display { margin-bottom: 0; }

/* --- Hero ---------------------------------------------------------------- */
.ag-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--ag-s5);
	padding: var(--ag-s6) var(--ag-s4);
	background: linear-gradient(120deg, #f6e6d8 0%, #f0d9c6 55%, #e5c3ae 100%);
}
.ag-hero__text { max-width: 34rem; margin-left: auto; }
.ag-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--ag-radius);
	display: block;
}

/* --- Grids --------------------------------------------------------------- */
.ag-grid { display: grid; gap: var(--ag-s3); }
.ag-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ag-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Category cards ------------------------------------------------------ */
.ag-card {
	display: flex;
	flex-direction: column;
	background: var(--ag-mint);
	border-radius: var(--ag-radius);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ag-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(29,74,69,0.14); }
.ag-card__media { aspect-ratio: 4 / 3; background: #e7f0ee; }
.ag-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-card__body { padding: var(--ag-s3); position: relative; }
.ag-card__title { font-family: var(--ag-sans); font-size: 1.2rem; color: var(--ag-deep); margin: 0 0 var(--ag-s1); }
.ag-card__desc { font-size: 0.95rem; color: var(--ag-ink-mute); margin: 0; padding-right: 2.5rem; }
.ag-card__arrow {
	position: absolute;
	top: var(--ag-s3);
	right: var(--ag-s3);
	width: 2.2rem; height: 2.2rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--ag-deep);
	color: #fff;
}

/* --- Product cards ------------------------------------------------------- */
.ag-products .ag-products {
	list-style: none;
	padding: 0;
	margin-block: 0;   /* was: margin: 0 — the shorthand killed the centering */
}
.ag-product__link { text-decoration: none; display: block; }
.ag-product__media { background: var(--ag-cream); border-radius: var(--ag-radius); overflow: hidden; margin-bottom: var(--ag-s2); }
.ag-product__media img { width: 100%; height: auto; display: block; }
.ag-product__title { font-family: var(--ag-sans); font-size: 1rem; line-height: 1.35; color: var(--ag-ink); margin: 0 0 var(--ag-s1); }
.ag-product__price { font-weight: 700; color: var(--ag-deep); }
.ag-product__price del { font-weight: 400; opacity: 0.55; margin-right: 0.4em; }

/* --- Trust row ----------------------------------------------------------- */
.ag-trust { background: var(--ag-cream); padding: var(--ag-s4); }
.ag-trust__list {
	list-style: none;
	max-width: var(--ag-max);
	margin-inline: auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ag-s3);
}
.ag-trust h3 { font-family: var(--ag-sans); font-size: 1rem; color: var(--ag-deep); margin: 0 0 0.35rem; }
.ag-trust p  { font-size: 0.92rem; color: var(--ag-ink-mute); margin: 0; }

/* --- Split (text + image) ------------------------------------------------ */
.ag-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ag-s5);
	align-items: center;
}
.ag-split__media img { width: 100%; height: auto; border-radius: var(--ag-radius); display: block; }

.ag-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ag-s2); }
.ag-tiles li { background: var(--ag-deep-soft); border-radius: var(--ag-radius); padding: var(--ag-s3); }
.ag-tiles h3 { font-family: var(--ag-sans); font-size: 1.05rem; margin: 0 0 var(--ag-s1); }
.ag-tiles p  { font-size: 0.92rem; color: rgba(255,255,255,0.78); margin: 0; }

/* ---------------------------------------------------------------------------
   4. RESPONSIVE
   -------------------------------------------------------------------------*/
@media (max-width: 980px) {
	.ag-hero,
	.ag-split { grid-template-columns: 1fr; }
	.ag-hero { padding-top: var(--ag-s5); }
	.ag-hero__text { margin-left: 0; }
	.ag-grid--3,
	.ag-grid--4,
	.ag-trust__list,
	.ag-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.ag-section { padding: var(--ag-s5) var(--ag-s3); }
	.ag-hero    { padding: var(--ag-s5) var(--ag-s3); }
	.ag-grid--3,
	.ag-trust__list,
	.ag-tiles { grid-template-columns: 1fr; }
	.ag-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.ag-actions .ag-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ag-home * { transition: none !important; }
}