/* css/components.css — Élan Films. Repeated blocks. */

/* ---- the letterbox frame ----
   2.39:1 anamorphic. With no photographs to show, the empty frame is the
   structural unit: it says "this is cinema" without pretending to be a
   portfolio. Used to hold a line of type, never a fake image. */
.frame { position: relative; aspect-ratio: 2.39 / 1; border: var(--bar) solid var(--rule-strong); display: grid; place-items: center; padding: var(--s-6); text-align: center; }
.on-dark .frame,
.hero .frame{ border-color: var(--zone-3); }
.frame::before, .frame::after { content: ''; position: absolute; left: var(--s-4); right: var(--s-4); height: var(--bar); background: var(--rule); }
.frame::before { top: var(--s-4); } .frame::after { bottom: var(--s-4); }
.on-dark .frame::before, .on-dark .frame::after,
.hero .frame::before, .hero .frame::after{ background: var(--zone-3); }
.frame p { font-family: var(--font-display); font-size: var(--t-xl); font-style: italic; margin: 0; max-width: 24ch; }
@media (max-width: 640px) { .frame { aspect-ratio: 16 / 10; } }

/* ---- grids ---- */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---- card ---- */
.card { border: var(--bar) solid var(--rule); padding: var(--s-5); background: var(--print); display: flex; flex-direction: column; gap: var(--s-3); transition: border-color .3s var(--ease-shutter), transform .3s var(--ease-shutter); }
.card:hover { border-color: var(--rule-strong); transform: translateY(-2px); }
.card h3 { margin: 0; font-size: var(--t-lg); }
.card p { margin: 0; font-size: var(--t-base); color: var(--ink-2); }
.card .meta { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--graphite); text-transform: uppercase; }
.card a.more { margin-top: auto; font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; }
.card a.more:hover { text-decoration: underline; }
.on-dark .card,
.hero .card{ background: var(--zone-2); border-color: var(--zone-3); }
.on-dark .card p,
.hero .card p{ color: var(--zone-7); }
.on-dark .card .meta,
.hero .card .meta{ color: var(--grey-card); }

/* ---- the answer block ----
   A self-contained passage an assistant can lift whole. Kept visually plain
   on purpose: it is here to be quoted, not decorated. */
.answer { border-left: 2px solid var(--blue-hour-deep); padding: var(--s-2) 0 var(--s-2) var(--s-5); margin: var(--s-6) 0; }
.answer p:last-child { margin-bottom: 0; }
.on-dark .answer,
.hero .answer{ border-color: var(--blue-hour); }

/* ---- the readout ----
   Anything a camera would report is set in mono, like a viewfinder line. */
.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-5); border-top: var(--bar) solid var(--rule-strong); padding-top: var(--s-5); margin: var(--s-6) 0; }
.readout div { display: grid; gap: var(--s-1); }
.readout dt, .readout .k { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--graphite); }
.readout dd, .readout .v { margin: 0; font-family: var(--font-display); font-size: var(--t-lg); }
.on-dark .readout,
.hero .readout{ border-color: var(--zone-3); }
.on-dark .readout dt, .on-dark .readout .k,
.hero .readout dt, .hero .readout .k{ color: var(--grey-card); }

/* ---- the sequence ----
   Numbered only where the content genuinely is a sequence: a shoot day runs
   in order and the order is the information. */
.sequence { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: shot; }
.sequence li { counter-increment: shot; display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-5); padding: var(--s-5) 0; border-top: var(--bar) solid var(--rule); }
.sequence li::before { content: counter(shot, decimal-leading-zero); font-family: var(--font-data); font-size: var(--t-sm); color: var(--graphite); letter-spacing: 0.08em; }
.sequence h3 { margin: 0 0 var(--s-2); font-size: var(--t-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.sequence p { margin: 0; font-size: var(--t-base); color: var(--ink-2); }
.on-dark .sequence li,
.hero .sequence li{ border-color: var(--zone-3); }
.on-dark .sequence p,
.hero .sequence p{ color: var(--zone-7); }
.on-dark .sequence li::before,
.hero .sequence li::before{ color: var(--grey-card); }
@media (max-width: 560px) { .sequence li { grid-template-columns: 2.6rem 1fr; gap: var(--s-4); } }

/* ---- prose ---- */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); font-family: var(--font-body); font-weight: 600; font-size: var(--t-md); letter-spacing: 0; }
.prose ul, .prose ol { padding-left: 1.1rem; margin: 0 0 var(--s-4); display: grid; gap: var(--s-2); }
.prose li { max-width: var(--measure); }
.prose table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--t-base); }
.prose th, .prose td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--bar) solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--graphite); font-weight: 400; }
.table-scroll { overflow-x: auto; }

/* ---- faq ---- */
.faq { border-top: var(--bar) solid var(--rule); max-width: var(--measure); }
.faq details { border-bottom: var(--bar) solid var(--rule); }
.faq summary { cursor: pointer; padding: var(--s-4) 2rem var(--s-4) 0; font-weight: 500; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 0; top: 50%; width: 11px; height: 1px; background: var(--ink); transition: transform .3s var(--ease-shutter); }
.faq summary::before { content: ''; position: absolute; right: 5px; top: 50%; width: 1px; height: 11px; margin-top: -5px; background: var(--ink); transition: opacity .3s; }
.faq details[open] summary::before { opacity: 0; }
.faq details > div { padding: 0 0 var(--s-5); }
.faq p { margin: 0 0 var(--s-3); }
.on-dark .faq, .on-dark .faq details,
.hero .faq, .hero .faq details{ border-color: var(--zone-3); }
.on-dark .faq summary::after, .on-dark .faq summary::before,
.hero .faq summary::after, .hero .faq summary::before{ background: var(--zone-9); }

/* ---- read next ---- */
.read-next { border-top: var(--bar) solid var(--rule-strong); margin-top: var(--s-8); padding-top: var(--s-5); }
.read-next .eyebrow { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--graphite); margin-bottom: var(--s-4); }
.read-next ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-3) var(--s-5); font-size: var(--t-base); }

/* ---- enquiry ---- */
.enquire { max-width: 880px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); }
.field { display: grid; gap: var(--s-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--graphite); }
.field label small { text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea { font: inherit; font-size: var(--t-base); padding: 0.72rem 0.85rem; border: var(--bar) solid var(--rule-strong); background: var(--print); color: var(--ink); border-radius: 0; width: 100%; }
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue-hour-deep); outline: none; box-shadow: 0 0 0 2px var(--blue-hour-wash); }
#form-status { font-size: var(--t-sm); margin-top: var(--s-4); }
#form-status[data-state="error"] { color: #8c2b2b; }
.after-strip { border-top: var(--bar) solid var(--rule-strong); margin-top: var(--s-7); padding-top: var(--s-5); }
.after-strip .eyebrow { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--graphite); margin-bottom: var(--s-4); }
.after-strip ol { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--s-3); font-size: var(--t-base); }
.after-strip li { max-width: 62ch; }

/* ---- link list ---- */
.linklist { list-style: none; margin: 0; padding: 0; border-top: var(--bar) solid var(--rule); }
.linklist li { border-bottom: var(--bar) solid var(--rule); }
.linklist a { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: baseline; padding: var(--s-4) 0; text-decoration: none; color: var(--ink); transition: padding-left .3s var(--ease-shutter); }
.linklist a:hover { padding-left: var(--s-3); }
.linklist .t { font-family: var(--font-display); font-size: var(--t-lg); }
.linklist .m { font-family: var(--font-data); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--graphite); text-transform: uppercase; }
.on-dark .linklist, .on-dark .linklist li,
.hero .linklist, .hero .linklist li{ border-color: var(--zone-3); }
.on-dark .linklist a,
.hero .linklist a{ color: var(--zone-9); }

/* ---- note: the honest disclosure block ---- */
.note { border: var(--bar) solid var(--rule-strong); padding: var(--s-5); max-width: var(--measure); font-size: var(--t-base); }
.note .k { font-family: var(--font-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--graphite); display: block; margin-bottom: var(--s-3); }
.note p:last-child { margin-bottom: 0; }
.on-dark .note,
.hero .note{ border-color: var(--zone-3); }