/* ============================================================
   Gertrudes homepage welcome / delivery / contact section
   ------------------------------------------------------------
   Loaded by catalog/controller/extension/module/ptstaticblock.php
   via document->addStyle() only when the welcome block renders.
   This file is injected in the per-route styles loop, which sits
   BEFORE stylesheet.css in the cascade — every rule therefore
   relies on class specificity (scoped under .gertrudes-info-section),
   never on source order, and no rule may leak outside that scope.
   ============================================================ */

/* 1. Scope, tokens, base type ------------------------------- */
.gertrudes-info-section{
	--gt-brand:#e85224;          /* icons / large accents only — fails AA at text size */
	--gt-brand-strong:#c73e12;   /* interactive text, hovers, badges */
	--gt-brand-soft:#fdeee6;
	--gt-ink:#2f2a26;
	--gt-muted:#6f6862;
	--gt-line:#efe8e2;
	--gt-surface-alt:#faf5f0;
	display:block;
	max-width:1080px;
	margin:40px auto 48px;
	color:var(--gt-ink);
	font-size:15px;
	line-height:1.6;
	text-align:left;
}

.gertrudes-info-section a{
	color:var(--gt-brand-strong);
	text-decoration:none;
}
.gertrudes-info-section a:hover{
	color:var(--gt-brand);
	text-decoration:underline;
}
.gertrudes-info-section a:focus-visible,
.gertrudes-info-section summary:focus-visible{
	outline:2px solid var(--gt-brand-strong);
	outline-offset:2px;
	border-radius:4px;
}

/* 2. Section head ------------------------------------------- */
.gt-info__head{
	text-align:center;
	margin-bottom:24px;
}
/* Eyebrow, title and card titles below all follow the shared spec in
   plaza/gtr-sectionhead.css. Values are tokens with literal fallbacks so this
   sheet still renders correctly if it is ever loaded on its own. */
.gt-info__eyebrow{
	margin:0 0 8px;
	font-size:12px;
	font-weight:600;
	letter-spacing:var(--gt-title-eyebrow-ls,.08em);
	line-height:1.4;
	text-transform:uppercase;
	color:var(--gt-title-eyebrow,#c73e12);
}
/* PAGE-level title (level 1). The home page renders no h1, so this h2 is the
   largest heading on it and takes the page step, not the section step. */
.gt-info__title{
	margin:0 auto;
	max-width:22ch;
	font-family:var(--gt-title-face,Prata,Georgia,serif);
	font-weight:400;
	font-size:var(--gt-title-page,clamp(26px,3.2vw,36px));
	line-height:var(--gt-title-lh,1.2);
	letter-spacing:var(--gt-title-ls,-0.01em);
	color:var(--gt-title-ink,#2f2a26);
}

/* 3. Service highlights ------------------------------------- */
.gt-info__highlights{
	list-style:none;
	margin:0 0 24px;
	padding:0;
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
}
.gt-info__highlight{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:14px 16px;
	background:var(--gt-surface-alt);
	border:1px solid var(--gt-line);
	border-radius:12px;
}
.gt-info__highlight-icon{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border-radius:50%;
	background:var(--gt-brand-soft);
	color:var(--gt-brand);
	font-size:16px;
}
.gt-info__highlight-body{
	min-width:0;
}
.gt-info__highlight-title{
	display:block;
	font-size:15px;
	font-weight:700;
	color:var(--gt-ink);
	margin-bottom:2px;
}
.gt-info__highlight-text{
	display:block;
	font-size:13.5px;
	color:var(--gt-muted);
}

/* 4. Introduction ------------------------------------------- */
.gt-info__intro{
	max-width:720px;
	margin:0 auto 20px;
	color:var(--gt-ink);
}
.gt-info__intro-lead,
.gt-info__intro-text{
	margin:0;
}
.gt-info__intro-lead{
	font-size:16px;
	font-weight:600;
	line-height:1.55;
}
.gt-info__intro-text{
	margin-top:8px;
	font-size:14.5px;
	line-height:1.65;
	color:var(--gt-muted);
}

/* 5. Business facts ----------------------------------------- */
.gt-info__facts{
	list-style:none;
	margin:0 0 24px;
	padding:0;
	display:grid;
	grid-template-columns:1fr;
	gap:10px;
}
.gt-info__fact{
	display:flex;
	align-items:flex-start;
	gap:12px;
	min-height:68px;
	padding:12px 14px;
	border:1px solid var(--gt-line);
	border-radius:12px;
	background:#fff;
	color:var(--gt-ink);
}
.gt-info__fact-icon{
	flex:0 0 36px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	margin-top:1px;
	border-radius:50%;
	background:var(--gt-brand-soft);
	color:var(--gt-brand);
	font-size:14px;
}
.gt-info__fact-body{
	min-width:0;
}
.gt-info__fact-title,
.gt-info__fact-text{
	display:block;
}
.gt-info__fact-title{
	font-size:14px;
	font-weight:700;
	line-height:1.35;
	color:var(--gt-ink);
}
.gt-info__fact-text{
	margin-top:2px;
	font-size:13px;
	line-height:1.45;
	color:var(--gt-muted);
}

/* 6. Cards (shared) ----------------------------------------- */
.gt-info__card{
	background:var(--gt-surface-alt);
	border:1px solid var(--gt-line);
	border-radius:12px;
	padding:18px 20px;
}
/* CARD-level title (level 3): sans, never Prata — a serif here would read as
   the same level as the section title above it. */
.gt-info__card-title{
	margin:0 0 10px;
	font-size:var(--gt-title-card,17px);
	font-weight:700;
	line-height:1.3;
	color:var(--gt-title-ink,#2f2a26);
}
.gt-info__card-title .fa{
	color:var(--gt-brand);
	margin-right:6px;
	font-size:16px;
}

/* 7. Same-day delivery areas -------------------------------- */
/* Moved out 2026-08-23. The block was redesigned around proximity-to-branch
   pills and now lives in plaza/module/gtr-delivery.css under its own `gt-del`
   namespace, body-<link>ed by ptstaticblock_gertrudes.twig so it loads last
   and carries a ?v=. The old `.gt-info__delivery` / `__areas` / `__chips`
   rules were deleted with their markup — nothing here styles that block. */

/* 8. Location + contact grid -------------------------------- */
.gt-info__grid{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
}
.gt-info__grid > *{
	min-width:0;
}
.gt-info__address{
	margin:0 0 14px;
	font-style:normal;
	font-size:15px;
	line-height:1.5;
	color:var(--gt-ink);
}
.gt-info__directions{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-height:44px;
	padding:10px 20px;
	border-radius:999px;
	background:var(--gt-brand-strong);
	font-size:14px;
	font-weight:600;
}
.gertrudes-info-section a.gt-info__directions{
	color:#fff;
}
.gertrudes-info-section a.gt-info__directions:hover{
	background:#a93511;
	color:#fff;
	text-decoration:none;
}

/* 9. Contact grid ------------------------------------------- */
.gt-info__contacts{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:12px 18px;
}
/* Label only — the peach icon circle that used to sit before each channel
   was removed 2026-08-23 (see the note in ptstaticblock_gertrudes.twig).
   Kept as a block, not a flex row, now that there is a single text child. */
.gt-info__contact-label{
	display:block;
	margin-bottom:4px;
	font-size:11px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gt-muted);
}
.gt-info__contact-link{
	display:inline-block;
	padding:5px 0;
	margin-right:12px;
	font-size:15px;
	font-weight:500;
}
.gt-info__contact-link--wrap{
	overflow-wrap:anywhere;
}

/* 10. Tablet and up ----------------------------------------- */
@media (min-width:768px){
	.gt-info__highlights{
		grid-template-columns:repeat(3,minmax(0,1fr));
		gap:14px;
	}
	.gt-info__highlight{
		flex-direction:column;
		align-items:center;
		text-align:center;
		padding:20px 16px;
	}
	.gt-info__facts{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
	.gt-info__contact-link{
		display:block;
		margin-right:0;
	}
}

/* 11. Desktop two-column location/contact ------------------- */
@media (min-width:992px){
	.gt-info__grid{
		grid-template-columns:2fr 3fr;
	}
	.gt-info__head{
		margin-bottom:32px;
	}
	.gt-info__highlights,
	.gt-info__facts{
		margin-bottom:28px;
	}
	.gt-info__intro{
		margin-bottom:24px;
	}
	.gt-info__intro-lead{
		font-size:17px;
	}
	.gt-info__intro-text{
		font-size:15.5px;
	}
}

/* 12. Compact phone spacing --------------------------------- */
@media (max-width:767px){
	.gertrudes-info-section{
		margin:28px auto 32px;
	}
	.gt-info__card{
		padding:16px;
	}
}

/* 13. Very narrow phones ------------------------------------ */
@media (max-width:400px){
	.gt-info__contacts{
		grid-template-columns:1fr;
		gap:10px;
	}
}