/*
=========================================================
PRICING PAGE STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
Page-specific styles for the /pricing/ page. Supplements
global.css, pricing.css, faq.css, and process.css with the
comparison table and layout tweaks unique to this page.

What belongs in this file
-------------------------
- Flush section modifier
- Comparison table wrapper and cells
- Pricing page add-on grid override
- Responsive rules

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/pricing-page.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet after global.css, pricing.css, faq.css, and process.css
2. use only on the /pricing/ page
3. keep shared pricing card and add-on styling in pricing.css

Maintenance rule
----------------
If a selector would be useful on other pricing or comparison pages, move to pricing.css.
*/

/* ================= FLUSH SECTIONS ================= */
.section.flush{padding-top:0}

/* ================= COMPARISON TABLE ================= */
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(10px,3vw,20px)}
.compare-table{width:100%;min-width:480px;border-collapse:separate;border-spacing:0;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden}
.compare-table th,.compare-table td{padding:12px 16px;text-align:left;font-size:clamp(.8rem,2.7vw,.9rem);line-height:1.45;border-bottom:1px solid rgba(255,255,255,.06)}
.compare-table thead th{background:rgba(255,255,255,.04);font-weight:800;color:var(--ink);font-size:clamp(.78rem,2.4vw,.86rem);letter-spacing:.02em;text-transform:uppercase}
.compare-table thead th:first-child{color:var(--muted)}
.compare-table tbody td{color:var(--muted)}
.compare-table tbody td:first-child{color:var(--ink);font-weight:700}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table tbody tr:hover{background:rgba(255,255,255,.02)}

/* ================= ADDON GRID ON PRICING PAGE ================= */
/* Override: show add-on grid directly (not inside details toggle) */
main>.section #add-ons .pricing-addon-grid{display:grid;gap:10px}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:700px){
	/* ================= COMPARISON TABLE ================= */
	.compare-table th,.compare-table td{padding:14px 20px;font-size:clamp(.84rem,1.35vw,.94rem)}
	.compare-table thead th{font-size:clamp(.8rem,1.2vw,.88rem)}
	/* ================= ADDON GRID ON PRICING PAGE ================= */
	main>.section #add-ons .pricing-addon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

@media(min-width:1024px){
	/* ================= COMPARISON TABLE ================= */
	.compare-table th,.compare-table td{padding:14px 24px}
	/* ================= ADDON GRID ON PRICING PAGE ================= */
	main>.section #add-ons .pricing-addon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}