/* ============================================================pranayama.css — styling for the Pranayama (yogic breathing)page. Cool "air & breath" palette layered on the sharedtheme tokens (sky / teal / violet).============================================================ */
/* ---------- Hero ---------- */
.pr-hero {
--practice-hero-height: clamp(250px, 18vw, 260px);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
width: 100%;
height: var(--practice-hero-height);
min-height: var(--practice-hero-height);
box-sizing: border-box;
padding: clamp(1.15rem, 2.3vw, 2rem) 1.2rem clamp(1.2rem, 2.4vw, 2.1rem);
background:
radial-gradient(circle at 48% 16%, rgba(255, 230, 174, 0.24), transparent 34%),
linear-gradient(90deg, #16261c 0%, #273b2c 18%, #50613c 50%, #283d30 82%, #142319 100%);
color: var(--text-inv);
text-align: center;
isolation: isolate;
}
.pr-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: url("../assets/pranayama-golden-reed-breeze.jpg") center 48% / cover no-repeat;
filter: brightness(1.03) saturate(1.06) contrast(1.04);
pointer-events: none;
}
/* The same photo with the reeds and grass swaying in a breeze, drawn by
   js/pranayama.js over the still photo (which stays as the fallback). */
.pr-hero__wind {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
filter: brightness(1.03) saturate(1.06) contrast(1.04);
pointer-events: none;
}
.pr-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(22, 38, 28, 0.46), rgba(22, 38, 28, 0.12) 38%, rgba(22, 38, 28, 0.38)),
linear-gradient(180deg, rgba(255, 236, 196, 0.04), rgba(22, 38, 28, 0.3)),
linear-gradient(100deg, transparent 0%, rgba(255, 235, 184, 0.09) 28%, transparent 48%, rgba(255, 255, 255, 0.05) 62%, transparent 78%);
pointer-events: none;
}
.pr-hero__inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; }
.pr-hero__eyebrow {
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 0.72rem;
font-weight: 700;
color: var(--sky);
margin-bottom: 0.8rem;
}
.pr-hero__title {
font-size: clamp(2.2rem, 6vw, 3.6rem);
line-height: 1.05;


margin: 0.2rem 0 0.3rem;
}
.pr-hero__sanskrit {
font-style: italic;
color: #ffe2a7;
font-weight: 600;
font-size: 1.1rem;
}
.pr-hero__intro {
margin: 1rem auto 0;
max-width: 640px;
color: var(--text-inv-soft);
font-size: 1.02rem;
}
.pr-back {
display: inline-block;
margin-bottom: 1rem;
color: var(--text-inv-soft);
text-decoration: none;
font-weight: 600;
}
.pr-back:hover { color: #fff; }
/* ---------- Section shell ---------- */
.pr-section { max-width: var(--maxw); margin: 0 auto; padding: 2.35rem 1.2rem; }
.pr-section__head { max-width: 720px; margin: 0 auto 1.25rem; text-align: center; }
.pr-eyebrow {
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.72rem;
font-weight: 700;
color: var(--sky);
margin-bottom: 0.5rem;
}
.pr-section__title { font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--ink-900); }
.pr-section__lead { margin-top: 0.7rem; color: var(--text-soft); font-size: 1rem; }
.pr-alt { background: linear-gradient(180deg, #fff, #eef6f8); }
@media (prefers-reduced-motion: reduce) {
.pr-hero::after { animation: none; }
}
@media (max-width: 620px) {
.pr-hero { --practice-hero-height: 280px; }
}
/* ---------- The four parts of the breath ---------- */
.pr-parts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 265px));
justify-content: center;
gap: 1.2rem;
}
.pr-part {
position: relative;
background: #fff;
border: 1px solid rgba(27, 19, 43, 0.08);
border-top: 4px solid var(--cc, var(--sky));
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
padding: 1.2rem 1.2rem 1.3rem;
text-align: center;
}
.pr-part__media {
margin: 0 0 0.8rem;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: calc(var(--radius-sm) - 2px);
background: rgba(111, 191, 214, 0.12);
}
.pr-part__photo,
.pr-tech__photo,
.pr-card__photo {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}


.pr-part__name { font-size: 1.08rem; color: var(--ink-900); margin: 0; }
.pr-part__sk { font-style: italic; color: var(--violet); font-weight: 600; font-size: 0.86rem; margin: 0.1rem 0
0.4rem; }
.pr-part__text { font-size: 0.9rem; color: var(--text-soft); margin: 0; }
/* ---------- The 9 techniques ---------- */
.pr-techniques {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.2rem;
}
.pr-tech {
position: relative;
background: #fff;
border: 1px solid rgba(27, 19, 43, 0.08);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
}
.pr-tech__no {
position: absolute;
top: 0.7rem;
right: 1rem;
font-weight: 700;
font-size: 1.5rem;
color: rgba(111, 191, 214, 0.4);
z-index: 1;
}
.pr-tech__fig {
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
background: rgba(111, 191, 214, 0.12);
}
.pr-tech__body { padding: 1.1rem 1.2rem 1.3rem; }
.pr-tech__name { font-size: 1.16rem; color: var(--ink-900); margin: 0; }
.pr-tech__sk { font-style: italic; color: var(--violet); font-weight: 600; font-size: 0.88rem; margin: 0.1rem 0
0.5rem; }
.pr-tech__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.pr-tech__tag {
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--cc, var(--sky));
background: rgba(111, 191, 214, 0.14);
border-radius: 999px; padding: 0.14rem 0.55rem;
}
.pr-tech__tag.pr-tech__tag--level {
color: #4b7a5a; background: rgba(123, 166, 134, 0.16);
}
.pr-tech__lead { font-size: 0.92rem; color: var(--text-soft); margin: 0 0 0.7rem; }
.pr-tech__steps { list-style: none; padding: 0; margin: 0 0 0.7rem; display: grid; gap: 0.4rem; counter-reset:
prstep; }
.pr-tech__steps li {
position: relative;
padding-left: 1.8rem;
font-size: 0.9rem;
color: var(--text);
counter-increment: prstep;
}
.pr-tech__steps li::before {


content: counter(prstep);
position: absolute; left: 0; top: 0;
width: 1.25rem; height: 1.25rem;
display: grid; place-items: center;
font-size: 0.7rem; font-weight: 700;
color: #fff; background: var(--cc, var(--sky));
border-radius: 50%;
}
.pr-tech__cue {
font-size: 0.85rem; color: var(--text-soft);
border-left: 3px solid var(--cc, var(--sky));
padding-left: 0.7rem; margin: 0;
}
.pr-tech__cue b { color: var(--ink-900); }
/* ---------- Benefit / info cards ---------- */
.pr-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
}
.pr-card {
background: #fff;
border: 1px solid rgba(27, 19, 43, 0.08);
border-left: 4px solid var(--cc, var(--sky));
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
padding: 1.2rem 1.2rem 1.3rem;
}
.pr-card__media {
margin: 0 0 0.85rem;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: calc(var(--radius-sm) - 2px);
background: rgba(111, 191, 214, 0.12);
}
.pr-card__title { font-size: 1.1rem; color: var(--ink-900); margin: 0 0 0.35rem; }
.pr-card__text { font-size: 0.92rem; color: var(--text-soft); margin: 0; }
/* ---------- Tips + attribution ---------- */
.pr-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.pr-tip {
background: #fff; border: 1px solid rgba(27, 19, 43, 0.08);
border-radius: var(--radius-sm); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
font-size: 0.92rem; color: var(--text-soft);
}
.pr-tip b { color: var(--ink-900); }
.pr-note {
max-width: 720px; margin: 1.4rem auto 0; text-align: center;
font-size: 0.95rem; color: var(--text-soft);
}
.pr-note b { color: var(--ink-900); }
.pr-source {
max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem 3rem;
text-align: center; font-size: 0.85rem; color: var(--text-soft);
}
@media (max-width: 720px) {
.pr-techniques { grid-template-columns: 1fr; }
}