/* ==========================================================================
   EV Clinic — the theme's own page templates.

   Booking, contact and locations. Each is a two-column layout that collapses
   to one, built from the same glass panels as everything else.
   ========================================================================== */

/* ------------------------------------------------------------- shared -- */

.booking-main,
.contact-main,
.locations-main,
.service-main{padding-bottom:clamp(40px,6vw,80px)}

.booking-head,
.contact-main .section-tight,
.locations-main .section-tight{padding-top:clamp(28px,5vw,56px)}

.booking-intro,
.locations-intro{max-width:var(--content);margin:0 0 clamp(28px,4vw,44px)}

.small{font-size:14px;color:var(--mute)}

/* ------------------------------------------------------------ booking -- */

.booking-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
/*
   Small screens only. On a desktop the status box is already on screen, in
   the right-hand column, and a jump link to something the visitor can see
   is noise.
*/
.booking-jump{
  display:none;
  margin:0 0 clamp(16px,2.5vw,24px);
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-size:14px;
  color:var(--mute);
}
.booking-jump a{
  color:var(--cold);
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
}
.booking-jump a:hover,
.booking-jump a:focus-visible{text-decoration:underline}

/* The jump lands on the box rather than under the sticky header. */
#job-status{scroll-margin-top:calc(var(--header-min) + 16px)}

@media (max-width:1000px){
  .booking-grid{grid-template-columns:1fr}

  /*
     The booking form first. This said `order:-1` on the aside, putting the
     status box above the wizard, on the reasoning that somebody checking a
     repair should not scroll past the whole form.

     It was the wrong side to optimise for, and the reports say so: people
     opened the page on a phone, saw "Already sent something in?", and did
     not know there was anything below it. The page exists to take bookings;
     the status check is the minority errand, and .booking-jump above the
     grid gets them there in one tap without costing everyone else the first
     screen.
  */
  .booking-jump{display:block}
}

.booking-aside{display:grid;gap:clamp(14px,2vw,20px)}

.booking-steps{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  counter-reset:step;
}
.booking-steps li{
  position:relative;
  padding:16px 0 16px 46px;
  border-top:1px solid var(--line-soft);
  color:var(--mute);
  font-size:15px;
}
.booking-steps li:first-child{border-top:0}
.booking-steps li strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.booking-steps li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:16px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--amber-ink);
}

.booking-where address{font-style:normal;line-height:1.55;margin:0 0 10px}
.booking-where .mono{font-size:13px;margin:0 0 4px}
.booking-where a{color:var(--cold);text-decoration:none}
.booking-where a:hover{text-decoration:underline}

/* ------------------------------------------------------------ contact -- */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

.contact-card h2{margin-top:0}

.contact-address{
  font-style:normal;
  font-size:17px;
  line-height:1.55;
  margin:0 0 22px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}

.contact-rows{margin:0;display:grid;gap:14px}
.contact-rows > div{display:grid;gap:3px}
.contact-rows dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
}
.contact-rows dd{margin:0;font-size:15px}
.contact-rows dd p{margin:0 0 .2em}
.contact-rows a{color:var(--cold);text-decoration:none}
.contact-rows a:hover{text-decoration:underline}

/* ---------------------------------------------------------- locations -- */

.locations-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(24px,3vw,36px);
}
.locations-country .mini-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

/* This location, in a list of every other one. A left rule and a mono tag
   rather than a highlighted row: the page is a directory, and one shouted
   row in a directory reads as an error. */
.centre.is-here{
  padding-left:11px;
  border-left:2px solid var(--mint);
}
.centre-here{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint-ink);
  margin-left:6px;
}

.locations-main .network{padding-top:clamp(20px,3vw,32px)}

/* ------------------------------------------------------------- a service --

   Eighteen of these arrive empty on activation, so the template has to make
   an empty one read as finished rather than as unwritten: the name, the
   services beneath it, and the two things anyone on the page came to do.
   What follows styles the parts that exist before a franchise types a word. */

.service-main{padding-top:clamp(28px,5vw,56px)}

.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-bottom:clamp(14px,2vw,22px);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);
}
.crumbs a{color:var(--mute);text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--cold);text-decoration:underline}

.service-main .section-head h1{max-width:18ch}
.service-main .entry-content{max-width:var(--content);margin-bottom:clamp(32px,5vw,56px)}

.service-kids{margin-bottom:clamp(32px,5vw,56px)}
.service-kids h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin:0 0 16px;
}
.service-card .card-body{padding:clamp(16px,2vw,22px)}
.service-card h3{font-size:clamp(16px,1.4vw,18px);margin:0}
.service-card p{font-size:14px;color:var(--mute);margin:8px 0 0}

/* The one band on the page that asks for something. It is the last thing,
   because on a page with real content underneath the title it should not
   interrupt the reading to sell. */
.service-act{
  border-radius:var(--radius);
  padding:clamp(20px,3vw,32px);
}
.service-act-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 32px;
}
.service-act-lead{
  margin:0;
  font-size:clamp(16px,1.5vw,19px);
  max-width:34ch;
}
.service-act .btn-row{margin-top:0}

@media (max-width:560px){
  .service-act-in{display:block}
  .service-act .btn-row{margin-top:18px}
  .service-act .btn{flex:1 1 100%;justify-content:center}
}

/* The theme's own sentence, shown only while the body is empty. Set larger
   than body copy because on a page with nothing else it IS the body copy. */
.service-intro{
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.55;
  color:var(--ink);
  max-width:52ch;
  margin:0 0 clamp(32px,5vw,56px);
}

/* ------------------------------------------------- what we wrote about it --

   Titles and links to evclinic.eu, never copied text. A list rather than
   cards: these are headlines of varying length and a card grid would either
   truncate them or leave ragged holes. */

.service-reading{margin-bottom:clamp(32px,5vw,56px)}
.service-reading h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin:0 0 14px;
}
.reading-list{list-style:none;margin:0;padding:0;max-width:var(--content)}
.reading-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.reading-list li:first-child{border-top:1px solid var(--line-soft)}
.reading-list a{
  flex:1 1 20ch;
  font-size:15px;line-height:1.4;
  color:var(--ink);text-decoration:none;
}
.reading-list a:hover,
.reading-list a:focus-visible{color:var(--cold);text-decoration:underline}

/* Where it came from, said quietly. It matters that the reader knows this
   link leaves for headquarters, and it does not matter enough to shout. */
.reading-src{
  flex:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--faint);
}

/* --------------------------------------------------------- the default body --

   Five sections, the same on every service page. Set as a reading column
   rather than as a grid: this is prose that somebody has to actually read
   before deciding to hand over a car, and a column is what gets read. */

.service-body{max-width:var(--content);margin:0 0 clamp(36px,5vw,64px)}
.service-sect{margin-bottom:clamp(26px,3.5vw,40px)}
.service-sect > h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin:0 0 12px;
}
.service-sect p{font-size:16px;line-height:1.62;color:var(--ink);margin:0 0 .8em}
.service-sect p:last-child{margin-bottom:0}

.service-signs{list-style:none;margin:0;padding:0}
.service-signs li{
  position:relative;
  padding:0 0 0 22px;
  margin-bottom:9px;
  font-size:16px;line-height:1.5;
}
/* A rule, not a bullet. These are symptoms, and a dash reads as a list of
   observations where a dot reads as a list of features. */
.service-signs li::before{
  content:"";
  position:absolute;left:0;top:.72em;
  width:11px;height:1px;
  background:var(--amber);
}

.service-method{
  list-style:none;
  counter-reset:evc-step;
  margin:0;padding:0;
}
.service-method li{
  counter-increment:evc-step;
  position:relative;
  padding:0 0 0 34px;
  margin-bottom:12px;
  font-size:16px;line-height:1.5;
}
.service-method li::before{
  content:counter(evc-step,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--amber-ink);
}

/* The one paragraph that is about this workshop's own terms rather than about
   the work. Set apart, because a franchise that changes nothing else should
   still notice this line is theirs to answer for. */
.service-note{
  margin-top:1em;
  padding-left:14px;
  border-left:2px solid var(--line);
  font-size:15px;
  color:var(--mute);
}

/* ------------------------------------------------- the services landing --

   Ten groups, each with the one line already written for it and its children
   beneath. A grid rather than a long list: the groups are siblings of equal
   weight, and a list implies an order that the tree does not have. */

.services-lead{max-width:var(--content);margin-bottom:clamp(32px,5vw,56px)}
.services-lead .service-intro{margin-bottom:.7em}
.services-lead .service-intro:last-child{margin-bottom:0}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,2.6vw,34px);
}
.services-card h3{
  font-size:clamp(17px,1.5vw,20px);
  margin:0 0 .4em;
  letter-spacing:-.01em;
}
.services-card h3 a{color:var(--ink);text-decoration:none}
.services-card h3 a:hover,
.services-card h3 a:focus-visible{color:var(--cold)}
.services-card > p{
  font-size:15px;line-height:1.55;color:var(--mute);
  margin:0;max-width:44ch;
}

/* The children, as a row of quiet links rather than a bulleted list. At this
   size they are a table of contents for the page above, not content. */
.services-sub{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:6px 14px;
  margin:12px 0 0;padding:0;
}
.services-sub a{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  color:var(--cold);text-decoration:none;
}
.services-sub a:hover,
.services-sub a:focus-visible{text-decoration:underline}

/* Marques. Counted from what the network has published, so the list is a
   claim the articles behind it can support. */
.marque-list{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:8px;
  margin:14px 0 0;padding:0;
}
.marque-list li{
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:100px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink);
}