/* Chapter 4: aperture and depth of field (lab layout lives in site.css) */

.dof-scale{display:block;width:100%;height:auto}
.view-head #photoLabel{color:var(--amber);font-size:15px;font-weight:700}
#takeaway{font-size:14px;font-weight:600;color:var(--on-body)}
.view-sensor .diagram{margin:auto 0;max-height:150px}

/* Illustrated photo preview: each layer blurs by its distance behind the subject (--k) */
.photo{flex:1;min-height:200px;position:relative;overflow:hidden;border-radius:8px;background:#CFDFE0}
.photo .layer{position:absolute;inset:0;display:block;width:100%;height:100%}
.photo .bg{filter:blur(calc(var(--blur, 0px) * var(--k)));transform:scale(1.06)}
.photo .lights{filter:blur(calc(var(--blur, 0px) * .12));transform:scale(1.06)}
.photo .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 45%,transparent 55%,#00000048 100%)}

/* Explanations and the science */
.explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.explain-grid p{margin:0 0 14px}
.science .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}

/* Large screens: views on the left, compact sliders on the right with the photo
   under them, so the whole lab fits on one screen */
@media (min-width:900px){
  .lab{grid-template-columns:minmax(0,1fr) minmax(0,.6fr) minmax(0,1.05fr);column-gap:24px;align-items:start;
       grid-template-areas:"head head head" "rays rays controls" "rays rays photo" "dof sensor photo"}
  .lab-head{grid-area:head}
  .lab-views{display:contents}
  .view-rays{grid-area:rays;align-self:stretch}
  .view-dof{grid-area:dof;align-self:stretch}
  .view-sensor{grid-area:sensor;align-self:stretch}
  .view-photo{grid-area:photo;align-self:stretch}
  .view-photo .photo{flex:1;min-height:200px}
  .lab-controls{grid-area:controls;grid-template-columns:1fr;border-top:1px solid var(--rule)}
  .lab-controls .control{padding:9px 0 7px;border-bottom:1px solid var(--rule)}
  .lab-controls .control-head label{font-size:15px}
  .lab-controls output{font-size:21px}
  .lab-controls input[type=range]{margin-top:2px;height:24px}
  .lab-controls .hint{font-size:12px;margin-top:0}
  .lab .chip{font-size:14px;padding:6px 12px}
  /* the sharp-range and sensor panels are narrow here: wrap headers, enlarge diagram text */
  .view-dof .view-head,.view-sensor .view-head,.view-photo .view-head{flex-wrap:wrap;row-gap:2px}
  .view-dof .view-head p,.view-sensor .view-head p{text-align:left}
  .view-rays .diagram{margin:auto 0}
  .view-dof text{font-size:23px}
  .view-sensor text{font-size:26px}
  .view-sensor .diagram{max-height:none}
}

/* Tablets: rays and sharp range full width, photo and sensor side by side */
@media (max-width:899px){
  .lab-views{grid-template-columns:1fr 1fr;grid-template-areas:"rays rays" "photo sensor" "dof dof"}
  .view-rays{grid-area:rays}.view-photo{grid-area:photo}.view-sensor{grid-area:sensor}.view-dof{grid-area:dof}
  .explain-grid{grid-template-columns:1fr;gap:24px}
  .science .steps{grid-template-columns:1fr}
  .explain-grid p{max-width:52em}
}
/* Phones: bigger labels inside the diagrams so they stay readable when scaled down */
@media (max-width:760px){
  .view-sensor .diagram{max-height:none}
  .photo{flex:none;height:auto;aspect-ratio:16/9;min-height:0}
  .view-rays text{font-size:32px}
  .view-rays .diagram-note{display:none}
  .view-dof text{font-size:26px}
  .view-sensor text{font-size:20px}
}

/* What blurs the background most: one card per change, blur disk against the starting ring */
.factors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.factor{margin:0;padding:16px 18px 20px;background:var(--body);border-radius:18px;font-family:var(--sans);color:var(--on-body-muted);font-size:15px;line-height:1.45}
.factor svg{display:block;width:96px;height:96px;margin-bottom:10px}
.factor .disk{fill:#F5A623;fill-opacity:.45;stroke:#F5A623;stroke-width:1.5}
.factor .base-ring{fill:none;stroke:#E7E9E4;stroke-width:1.5;stroke-dasharray:3 4}
.factor-x{display:block;font-size:34px;font-weight:800;font-stretch:75%;line-height:1;color:var(--amber);margin-bottom:6px}
.factor strong{display:block;font-size:17px;color:var(--on-body);margin-bottom:4px}

/* Bokeh shape */
.bokeh-lab{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px 40px;align-items:start}
.bokeh-view{padding:14px 16px 16px}
.bokeh-view .diagram{background:#0C0E10;border-radius:8px}
.bokeh-view .view-foot{margin-top:10px}
.bokeh-controls .control:first-child{padding-top:0}

/* In the field */
.after-table{margin-top:14px}
.recompose{margin:6px 0 16px}

@media (max-width:1023px){
  .factors{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bokeh-lab{grid-template-columns:1fr}
}
@media (max-width:560px){
  .factors{grid-template-columns:1fr}
  .factor{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 14px;align-items:start}
  .factor svg{width:72px;height:72px;margin:0}
}