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

Purpose
-------
This file contains the shared pricing styles used across joshuadaltonmedia.com. It is designed to support package cards, price rows, feature lists, pricing actions, expandable add-on panels, and add-on cards for service-based pages such as weddings, commercial, real estate, events, or future offer pages.

What belongs in this file
-------------------------
- Shared pricing card layouts
- Shared tier, kicker, title, and price styling
- Shared pricing feature lists and notes
- Shared pricing CTA/action rows
- Shared expandable add-ons panel styling
- Shared add-on card layouts and tags
- Shared responsive breakpoint rules for pricing components

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

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

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared pricing class system for package and add-on sections
3. keep truly page-specific pricing tweaks inside their page skin stylesheet

Maintenance rule
----------------
If a selector is not part of the shared pricing system itself, it should not be added here. Keep this file focused on reusable pricing structure, package cards, and add-on components.
*/

/* ================= PRICING CARDS ================= */
.pricing-card{position:relative;display:grid;grid-template-rows:auto auto auto 1fr auto auto;gap:12px;min-height:min(74vh,640px);padding:clamp(18px,5vw,30px);background:linear-gradient(180deg,rgba(20,20,20,.9),rgba(20,20,20,.74));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:0 18px 60px rgba(0,0,0,.55);overflow:hidden;scroll-snap-align:start}
.pricing-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,77,77,.14),transparent 48%);opacity:.22;pointer-events:none}
.pricing-card.featured{border:1px solid rgba(255,77,77,.45);box-shadow:0 22px 70px rgba(255,77,77,.14)}
.pricing-card.featured::after{content:"Most\APopular";white-space:pre;position:absolute;top:0;right:0;width:90px;height:90px;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px 8px 0 0;background:linear-gradient(225deg,var(--accent) 50%,transparent 50%);color:#fff;font-size:.7rem;line-height:1.15;font-weight:800;letter-spacing:.04em;text-align:right;text-transform:uppercase;border-radius:0 calc(var(--radius) - 1px) 0 0;pointer-events:none;z-index:2}

/* ================= PRICING CARD CONTENT ================= */
.pricing-tier{position:relative;z-index:1;display:grid;gap:4px;padding-right:92px}
.pricing-title{font-size:clamp(1rem,4.2vw,1.2rem);line-height:1.15;font-weight:800;color:var(--ink)}
.pricing-kicker{font-size:clamp(.68rem,2.4vw,.78rem);line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:800}
.pricing-price{position:relative;z-index:1;display:flex;align-items:flex-end;gap:8px;line-height:1}
.pricing-price strong{font-size:clamp(1.65rem,8vw,2.25rem);font-weight:800;color:var(--accent)}
.pricing-price span{font-size:clamp(.76rem,2.4vw,.88rem);color:var(--muted);padding-bottom:3px}
.pricing-desc{position:relative;z-index:1;font-size:clamp(.82rem,2.9vw,.92rem);line-height:1.5;color:var(--muted)}

/* ================= PRICING LISTS ================= */
.pricing-list{position:relative;z-index:1;--accent-list-gap:8px;--accent-list-font-size:clamp(.8rem,2.7vw,.9rem);--accent-list-line-height:1.45;--accent-list-color:var(--ink)}
.pricing-list li.muted{color:var(--muted)}

/* ================= PRICING FOOTER ================= */
.pricing-bottom{position:relative;z-index:1;display:grid;gap:10px}
.pricing-note{font-size:clamp(.72rem,2.2vw,.82rem);line-height:1.45;color:var(--muted)}
.pricing-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pricing-actions .btn{flex:0 0 auto}

/* ================= PRICING ADDONS SHELL ================= */
.pricing-addons{position:relative;border-radius:var(--radius);background:linear-gradient(180deg,rgba(18,18,18,.92),rgba(18,18,18,.78));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 60px rgba(0,0,0,.45);overflow:hidden}
.pricing-addons::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,77,77,.12),transparent 44%);opacity:.2;pointer-events:none}

/* ================= PRICING ADDONS TOGGLE ================= */
.pricing-addons-toggle{position:relative;z-index:1;list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:clamp(18px,4vw,28px)}
.pricing-addons-toggle::-webkit-details-marker{display:none}
.pricing-addons-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pricing-addons-head{display:grid;gap:6px}
.pricing-addons-kicker{font-size:clamp(.68rem,2.4vw,.78rem);line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:800}
.pricing-addons-title{margin:0;font-size:clamp(1rem,4vw,1.22rem);line-height:1.15;color:var(--ink);font-weight:800}
.pricing-addons-lead{margin:0;font-size:clamp(.8rem,2.7vw,.92rem);line-height:1.5;color:var(--muted)}
.pricing-addons-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:var(--accent);flex:0 0 auto}
.pricing-addons-icon svg{width:18px;height:18px;display:block;transition:transform .22s ease}
.pricing-addons[open] .pricing-addons-icon svg{transform:rotate(180deg)}

/* ================= PRICING ADDONS BODY ================= */
.pricing-addons-body{position:relative;z-index:1;display:grid;gap:14px;padding:0 clamp(18px,4vw,28px) clamp(18px,4vw,28px)}
.pricing-addon-grid{display:grid;gap:10px}

/* ================= PRICING ADDON CARDS ================= */
.pricing-addon-card{position:relative;display:grid;gap:10px;padding:14px;border-radius:calc(var(--radius) - 4px);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.pricing-addon-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pricing-addon-name{margin:0;font-size:clamp(.9rem,3vw,1rem);line-height:1.2;color:var(--ink);font-weight:700}
.pricing-addon-price{flex:0 0 auto;font-size:clamp(.7rem,2.2vw,.8rem);line-height:1.1;color:var(--accent);font-weight:800;letter-spacing:.04em;text-align:right;white-space:nowrap}
.pricing-addon-copy{margin:0;font-size:clamp(.76rem,2.45vw,.86rem);line-height:1.5;color:var(--muted)}
.pricing-addon-meta{display:flex;flex-wrap:wrap;gap:8px}
.pricing-addon-tag{--tag-chip-min-height:28px;--tag-chip-padding:6px 10px;--tag-chip-letter-spacing:.02em}

/* ================= PRICING ADDONS FOOTER ================= */
.pricing-addons-foot{display:grid;gap:10px;padding-top:2px}
.pricing-addons-note{margin:0;font-size:clamp(.72rem,2.2vw,.82rem);line-height:1.45;color:var(--muted)}
.pricing-addons-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

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

@media(min-width:700px){
	/* ================= PRICING CARDS ================= */
	.pricing-card{min-height:100%;padding:clamp(24px,3vw,34px)}
	.pricing-title{font-size:clamp(1.05rem,1.9vw,1.24rem)}
	.pricing-price strong{font-size:clamp(2rem,4vw,2.4rem)}
	.pricing-desc{font-size:clamp(.86rem,1.45vw,.96rem)}
	.pricing-list li{font-size:clamp(.84rem,1.35vw,.94rem)}
	/* ================= PRICING ADDONS ================= */
	.pricing-addons-toggle{padding:clamp(22px,3vw,30px)}
	.pricing-addons-title{font-size:clamp(1.04rem,1.9vw,1.22rem)}
	.pricing-addons-lead{font-size:clamp(.84rem,1.35vw,.94rem)}
	.pricing-addons-body{padding:0 clamp(22px,3vw,30px) clamp(22px,3vw,30px);gap:16px}
	.pricing-addon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.pricing-addon-card{padding:16px}
	.pricing-addon-name{font-size:clamp(.92rem,1.45vw,1rem)}
	.pricing-addon-copy{font-size:clamp(.8rem,1.2vw,.88rem)}
}

@media(min-width:1024px){
	/* ================= PRICING CARDS ================= */
	.pricing-card{min-height:560px}
	/* ================= PRICING ADDONS ================= */
	.pricing-addons-body{padding:0 30px 30px}
	.pricing-addon-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}