/* Gatto Services — service pages, group B (P10–P17). Owner: B11.
   Only components not present in site.css. Tokens come from site.css. */

/* Considerations / factor grid */
.consider-grid { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.consider-grid li { background: var(--white); border: 1px solid var(--line-light); border-top: 4px solid var(--blue-brand); border-radius: var(--radius); padding: var(--s3); }
.consider-grid strong { display: block; font-family: var(--font-head); font-size: 1.1rem; line-height: 1.25; margin-bottom: 6px; }
.dark .consider-grid li { background: var(--navy-900); border-color: var(--line-dark); border-top-color: var(--blue-300); color: var(--ink); }

/* Two-column comparison ("this page" vs "a different product") */
.compare-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s3); }
.compare-2 > div { padding: var(--s3); border-radius: var(--radius); border: 1px solid var(--line-light); background: var(--white); }
.compare-2 h3 { font-size: 1.1rem; margin-bottom: var(--s1); }
.compare-2 p:last-child { margin-bottom: 0; }
/* 16/10/2026: project card under the comparison (P13, ice cream production room) */
.zone-project-head { margin-top: var(--s6); }

/* Typographic hero panel for narrative pages without a photo position (P15, P16).
   Never a stand-in for project photography. */
.type-panel { border: 1px solid var(--line-dark); border-left: 6px solid var(--red-600); border-radius: var(--radius); background: var(--navy-900); padding: var(--s4); }
.type-panel p { margin: 0 0 var(--s1); color: var(--muted-dark); font-size: .95rem; }
.type-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.type-panel li { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: var(--ink); line-height: 1.15; }
.type-panel li span { display: block; font-family: var(--font-body); font-weight: 500; font-size: .95rem; color: var(--muted-dark); }

/* Scope note (what the project includes / how it is quoted) */
.scope-note { margin-top: var(--s3); padding: var(--s2) var(--s3); border-left: 4px solid var(--blue-brand); background: var(--white); border-radius: 0 var(--radius) var(--radius) 0; }
.light .scope-note { background: var(--white); }
.dark .scope-note { background: var(--navy-900); border-left-color: var(--blue-300); }

/* Draft marker from the generator (local/staging only; production refuses markers). */
mark.pending { background: #FFE58A; color: #091426; padding: 0 4px; border-radius: 3px; font-weight: 600; }

@media (max-width: 1024px) {
  .consider-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .consider-grid, .compare-2 { grid-template-columns: 1fr; }
  .type-panel { padding: var(--s3); }
}

/* P13 (02/10/2026): career text beside the two commercial photos (FF-01 4:3 + FF-02 4:5); stacked on phones. */
.com-exp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s6); align-items: center; }
.com-photos { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.com-photos .photo-figure { margin: 0; max-width: none; }
@media (max-width: 900px) { .com-exp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }
@media (max-width: 480px) { .com-photos { grid-template-columns: minmax(0, 1fr); } }