/* =============================================================================
   Georgia Mechanical — responsive.css
   Refactored for readability, maintainability, and scalability.
   Layout, spacing, and visual output are 100% preserved.

   All token references use CSS variables defined in main.css (:root).
   =============================================================================

   Breakpoints
   ─────────────────────────────────────────────────────────────────────────────
   ≤ 1600px  —  (reserved, no active rules)
   ≤ 1500px  —  (reserved, no active rules)
   ≤ 1299px  —  Large desktops
   ≤ 1199px  —  Medium desktops
   ≤  991px  —  Tablets / small laptops
   ≤  767px  —  Large phones / landscape tablets
   ≤  575px  —  Small phones (CTA)
   ≤  479px  —  Extra-small phones
   ≤  383px  —  Very small devices
   ───────────────────────────────────────────────────────────────────────────── */

/* =============================================================================
   ≤ 1600px  (reserved — no active rules)
   ============================================================================= */
@media (max-width: 1600px) {
}

/* =============================================================================
   ≤ 1500px  (reserved — no active rules)
   ============================================================================= */
@media (max-width: 1500px) {
}

/* =============================================================================
   ≤ 1299px  — Large Desktops
   ============================================================================= */
@media (max-width: 1299.98px) {
	/* Membership Highlight: remove left indent and tighten max-width */
	.membership-highlight-des {
		padding-left: 0;
		max-width: 650px;
	}
	.mission-statement-content {
		margin-left: 0;
	}
}

/* =============================================================================
   ≤ 1199px  — Medium Desktops
   ============================================================================= */
@media (max-width: 1199.98px) {
	.membership-highlight-des {
		max-width: 500px;
	}
	.membership-highlight-img {
		margin-bottom: 0;
	}
	.owl-nav {
		left: -75px;
		width: calc(100% + 150px);
	}
}

/* =============================================================================
   ≤ 991px  — Tablets / Small Laptops
   ============================================================================= */
@media (max-width: 991.98px) {
	/* ── Typography Scale ── */
	h1 {
		font-size: 50px;
	}
	h2 {
		font-size: 40px;
	}

	h3,
	.inner-text,
	.banner-content-inner p {
		font-size: 36px;
	}

	h4,
	.author-information h5,
	.testimonial-content-wrapper blockquote {
		font-size: 28px;
	}

	h5 {
		font-size: 22px;
	}

	.btn-1 {
		font-size: 16px;
		padding: 10px 18px;
		min-width: auto;
	}

	/* ── Banner ── */
	.banner-content {
		padding: 8vw 5vw;
	}
	.banner-content-inner {
		margin: 50px 0 30px;
	}

	/* ── Section Vertical Rhythm ── */
	.cta-area,
	.our-members-area,
	.membership-highlight-area {
		padding: 70px 0;
	}
	.our-members-area {
		padding-bottom: 100px;
	}
	/* ── Membership Highlight ── */
	/* Reverse column order so image appears below text on tablet */
	.membership-highlight-area .container .row {
		flex-direction: column-reverse;
	}

	.membership-highlight-des {
		max-width: 100%;
	}

	.membership-highlight-inner-des p,
	.cta-inner-info p,
	.mission-statement-inner-content p {
		font-size: 20px;
	}

	.membership-highlight-inner-des p,
	.mission-statement-content h2,
	.mission-statement-inner-content p {
		margin-bottom: 15px;
	}

	.membership-highlight-inner-des {
		margin-bottom: 30px;
	}

	.membership-highlight-des a,
	.testimonial-content-wrapper blockquote {
		margin-bottom: 15px;
	}

	.membership-highlight-img {
		margin-right: auto;
	}

	/* ── Mission Statement ── */

	.mission-statement-content .btn-1 {
		margin-top: 30px;
	}

	/* ── Earnings ── */
	.earnings-area {
		padding-top: 0;
	}

	.earnings-content-box {
		margin-right: auto;
		margin-left: auto;
		max-width: 100%;
		padding: 10vw 5vw;
	}

	.earnings-table-info h6 {
		margin-bottom: 10px;
	}
	.earnings-inner-content {
		margin-top: 15px;
	}
	/* ── CTA ── */
	.cta-inner-content {
		gap: 30px;
		margin-top: 30px;
	}
	.owl-nav {
		left: 0;
		width: 100%;
		justify-content: center;
		top: auto;
		transform: translateY(50%);
		gap: 20px;
		bottom: -30px;
	}
}

/* =============================================================================
   ≤ 767px  — Large Phones / Landscape Tablets
   ============================================================================= */
@media (max-width: 767.98px) {
	/* ── Typography Scale ── */
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 36px;
	}

	h3,
	.inner-text {
		font-size: 30px;
	}

	h4,
	.author-information h5,
	.testimonial-content-wrapper blockquote,
	.banner-content-inner p {
		font-size: 24px;
	}

	h5 {
		font-size: 20px;
	}

	/* ── banner section ── */
	.banner-content-inner {
		margin: 35px 0 25px;
	}
	/* ── Section Vertical Rhythm ── */
	.cta-area,
	.our-members-area,
	.membership-highlight-area {
		padding: 50px 0;
	}
	.our-members-area {
		padding-bottom: 80px;
	}

	/* ── Earnings ── */
	.earnings-inner-content p {
		font-size: 20px;
	}

	.earnings-table-info h6,
	.earnings-table-info ul li {
		font-size: 18px;
	}

	.earnings-table-info ul li {
		margin-bottom: 10px;
	}

	.earnings-table-info {
		min-width: 100px;
		padding-bottom: 0;
	}

	.earnings-table {
		gap: 30px;
	}

	/* ── Footer ── */
	/* Stack footer columns on smaller screens */
	.footer-top-wrapper .col {
		flex: 1 0 100%;
	}

	.footer-right-content br {
		display: none;
	}

	.footer-top-wrapper {
		margin-bottom: 30px;
	}

	.foot_cont {
		text-align: center;
	}
}

/* =============================================================================
   ≤ 575px  — Small Phones (CTA adjustments)
   ============================================================================= */
@media (max-width: 575.98px) {
	/* ── CTA ── */
	.cta-inner-content {
		gap: 20px;
		margin-top: 20px;
	}

	.cta-inner-info .btn-1 {
		margin-bottom: 15px;
	}
	.owl-nav button {
		height: 44px;
		width: 44px;
	}
	.owl-nav button svg {
		height: 22px;
		width: 22px;
	}
}

/* =============================================================================
   ≤ 479px  — Extra-Small Phones
   ============================================================================= */
@media (max-width: 479.98px) {
	/* ── Typography Scale ── */
	h1 {
		font-size: 36px;
	}
	h2 {
		font-size: 30px;
	}

	h3,
	.inner-text {
		font-size: 24px;
	}

	h4,
	.author-information h5,
	.testimonial-content-wrapper blockquote,
	.banner-content-inner p {
		font-size: 20px;
	}

	.cta-inner-info p,
	.mission-statement-inner-content p,
	.membership-highlight-inner-des p {
		font-size: 18px;
	}
	/* banner section */
	.banner-content-inner {
		margin: 25px 0;
	}

	/* ── Earnings — stack table columns vertically ── */
	.earnings-table {
		gap: 20px;
	}

	/* ── Footer — stack all footer items ── */
	.copy-right-item-area .col,
	.socials-item-area .col {
		flex: 1 0 100%;
	}

	.socials-link-wrapper {
		justify-content: center;
		margin-bottom: 15px;
	}

	.copy-right-caption,
	.ncua-caption,
	.other-link-wrapper {
		text-align: center !important;
	}
}

/* =============================================================================
   Phase 2 — Hero video + products slider breakpoint overrides
   ============================================================================= */
@media (max-width: 991.98px) {
	h1.banner-heading {
		font-size: 40px;
	}
	.banner-content-inner.hero-subcopy {
		margin: 14px 0 0;
	}
	.hero-banner-content .hero-subcopy p {
		font-size: 20px;
	}
}

@media (max-width: 767.98px) {
	h1.banner-heading {
		font-size: 34px;
	}
	.banner-content-inner.hero-subcopy {
		margin: 12px 0 0;
	}
	.hero-banner-content .hero-subcopy p {
		font-size: 18px;
	}
}

@media (max-width: 479.98px) {
	h1.banner-heading {
		font-size: 28px;
	}
}

/* =============================================================================
   ≤ 383px  — Very Small Devices
   ============================================================================= */
@media (max-width: 383.98px) {
	/* ── Typography Scale ── */
	h1 {
		font-size: 32px;
	}
	h2 {
		font-size: 26px;
	}

	h3,
	.inner-text {
		font-size: 22px;
	}

	h4,
	.banner-content-inner p {
		font-size: 20px;
	}
	.earnings-table-info {
		min-width: 80px;
	}
	.earnings-table-info h6,
	.earnings-table-info ul li {
		font-size: 16px;
	}
}