/* The Real Gay Guy Pro — layout primitives. Phase 2 fleshes grid utilities. */

.trgg-container {
	width: 100%;
	max-width: var(--trgg-container);
	margin: 0 auto;
	padding: 0 var(--trgg-s-4);
}
.trgg-container--narrow {
	max-width: var(--trgg-container-narrow);
}

.trgg-section {
	padding: var(--trgg-s-7) 0;
}
@media (min-width: 1025px) {
	.trgg-section { padding: var(--trgg-s-8) 0; }
}

.trgg-bg-bone        { background: var(--trgg-bone); color: var(--trgg-ink); }
.trgg-bg-blush-wash  { background: radial-gradient(ellipse at top, var(--trgg-blush), var(--trgg-bone) 60%); }
.trgg-bg-gold-rule   { background: var(--trgg-bone); border-top: 1px solid var(--trgg-gold); border-bottom: 1px solid var(--trgg-gold); }
.trgg-bg-dark-edit   { background: var(--trgg-plum); color: var(--trgg-bone); }
.trgg-bg-dark-edit h1, .trgg-bg-dark-edit h2, .trgg-bg-dark-edit h3 { color: var(--trgg-bone); }
.trgg-bg-dark-edit a { color: var(--trgg-gold); }

.trgg-grid { display: grid; gap: var(--trgg-s-5); }

@media (min-width: 641px) {
	.trgg-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
	.trgg-grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.trgg-grid--2 { grid-template-columns: 1fr; }
.trgg-grid--3 { grid-template-columns: 1fr; }
.trgg-grid--4 { grid-template-columns: 1fr; }
.trgg-grid--6 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 641px) {
	.trgg-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.trgg-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.trgg-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.trgg-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
	.trgg-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.trgg-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.trgg-grid--6 { grid-template-columns: repeat(6, 1fr); }
}

.trgg-section__head {
	max-width: 720px;
	margin: 0 auto var(--trgg-s-6);
	text-align: center;
}
.trgg-section__title  { margin-bottom: var(--trgg-s-3); }
.trgg-section__subtitle { color: var(--trgg-text-mute); margin: 0 auto; max-width: 60ch; }

.trgg-site-header {
	background: var(--trgg-bone);
	border-bottom: 1px solid var(--trgg-border);
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: saturate(140%) blur(8px);
	background: rgba(244, 237, 226, 0.92);
}
.trgg-site-header__inner {
	display: flex; align-items: center; gap: var(--trgg-s-5);
	padding-top: var(--trgg-s-3); padding-bottom: var(--trgg-s-3);
}
.trgg-site-title { text-decoration: none; color: var(--trgg-ink); font-family: var(--trgg-font-display); font-size: var(--trgg-fs-xl); display: inline-flex; align-items: baseline; gap: 0.4em; white-space: nowrap; }
.trgg-site-title__mark { white-space: nowrap; }
.trgg-site-title__sub { font-family: var(--trgg-font-mono); font-size: var(--trgg-fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--trgg-gold); white-space: nowrap; }
.trgg-site-header__brand { flex: 0 0 auto; min-width: max-content; }
.trgg-site-tagline { font-size: var(--trgg-fs-sm); color: var(--trgg-text-mute); margin: 0; }

.trgg-primary-nav { display: none; margin-left: auto; align-items: center; gap: var(--trgg-s-4); }
@media (min-width: 1025px) {
	.trgg-primary-nav { display: flex; }
	.trgg-menu-toggle { display: none; }
}
.trgg-menu--primary { display: flex; list-style: none; padding: 0; margin: 0; gap: var(--trgg-s-5); }
.trgg-menu--primary a { color: var(--trgg-ink); text-decoration: none; font-weight: 600; }
.trgg-menu--primary a:hover { color: var(--trgg-cta); }

.trgg-menu-toggle {
	margin-left: auto;
	background: transparent; border: 1px solid var(--trgg-border);
	padding: var(--trgg-s-2) var(--trgg-s-3); border-radius: var(--trgg-radius-sm);
}
.trgg-menu-toggle__bar { display: block; width: 22px; height: 2px; background: var(--trgg-ink); margin: 4px 0; }

.trgg-mobile-menu { padding: var(--trgg-s-4); border-top: 1px solid var(--trgg-border); }
.trgg-mobile-menu .trgg-menu { list-style: none; padding: 0; margin: 0; }
.trgg-mobile-menu .trgg-menu li { padding: var(--trgg-s-2) 0; }
.trgg-mobile-menu .trgg-menu a { color: var(--trgg-ink); text-decoration: none; font-weight: 600; }

.trgg-site-footer {
	background: var(--trgg-plum);
	color: var(--trgg-bone);
	padding: var(--trgg-s-7) 0 var(--trgg-s-5);
	margin-top: var(--trgg-s-7);
}
.trgg-site-footer a { color: var(--trgg-gold); }
.trgg-footer-cols {
	display: grid; gap: var(--trgg-s-5);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .trgg-footer-cols { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.trgg-footer-brand { font-family: var(--trgg-font-display); font-size: var(--trgg-fs-xl); margin: 0 0 var(--trgg-s-2); color: var(--trgg-bone); }
.trgg-footer-tag { color: rgba(244, 237, 226, 0.7); margin-bottom: var(--trgg-s-3); }
.trgg-footer-disclosure { font-size: var(--trgg-fs-xs); color: rgba(244, 237, 226, 0.6); }
.trgg-footer-legal { margin-top: var(--trgg-s-5); border-top: 1px solid rgba(244, 237, 226, 0.15); padding-top: var(--trgg-s-4); }
.trgg-menu--legal { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--trgg-s-4); font-size: var(--trgg-fs-sm); }
.trgg-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--trgg-s-3); margin-top: var(--trgg-s-4); border-top: 1px solid rgba(244, 237, 226, 0.1); padding-top: var(--trgg-s-3); font-size: var(--trgg-fs-xs); color: rgba(244, 237, 226, 0.6); }
.trgg-copy, .trgg-domain { margin: 0; }