/* The AC pump conversion page's support and FAQ sections — nothing the shared
 * sheets already carry.
 *
 * Everything these two sections are made of is the site's own vocabulary:
 * .section, .section--pale, .container, .section__head, .section__sub, .eyebrow,
 * .figure, .figure__caption and .media-frame with its aspect modifier come from
 * style.css and sections.css, and the framed picture is contained inside its box
 * by the shared rule rather than cropped by one of this file's own. What is
 * written below is the arrangement the two sections need:
 *
 *   .acn-support__grid / __item / __icon / __title / __text
 *   .acn-support__shots / __shot
 *   .acn-faq__list / __item / __question / __answer / __text / __links / __link
 *
 * The two files that print these classes are components/conversion-support.php
 * and components/conversion-faq.php, and this sheet is loaded only on the page
 * they belong to (functions.php, handle hober-acn-sections).
 *
 * Every colour, radius, shadow and space comes from assets/css/tokens.css. No
 * colour is written into this file, nothing is positioned absolutely, nothing
 * animates on its own, and the longest transition is the site's --transition-fast
 * on a colour or a border. Both sections hold at 320px: the benefits and the
 * photographs are one column there, and the question rows wrap rather than
 * overflow. */

/* ------------------------------------------------------- Why HOBER -- */
/* The six benefits: three columns on a wide screen, two through the middle of
   the range, one below 760px. Each one is a white card on the section's own
   ground, read as the site reads a capability — the line drawing in the chip, the
   name beside it, the sentence under both. */
.acn-support__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  margin:0;
  padding:0;
  list-style:none;
}

.acn-support__item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:0 16px;
  align-content:start;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}

/* The card answers the pointer without moving: the hairline takes the accent and
   the box takes the site's float shadow. */
.acn-support__item:hover,
.acn-support__item:focus-within{
  border-color:var(--color-accent);
  box-shadow:var(--shadow-float);
}

.acn-support__icon{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--radius-md);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

.acn-support__title{
  grid-column:2;
  grid-row:1;
  align-self:center;
  margin:0;
  font-size:17px;
  line-height:1.3;
}

.acn-support__text{
  grid-column:1 / -1;
  grid-row:2;
  margin:14px 0 0;
  font-size:14px;
  line-height:1.55;
  color:var(--color-muted);
}

/* The photographs of HOBER's own work, read from the Media Library at render
   time: the unit, the workshop, the technical team and the drive in service.
   Four across while there is room for four even frames, two by two under that
   and one by one on a telephone. The frame is the site's .media-frame with the
   4x3 modifier, so a tall or a wide attachment is fitted inside the same box
   instead of being cut to it, and the caption under it says which shot it is. */
.acn-support__shots{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  margin:clamp(28px,3.6vw,44px) 0 0;
  padding:0;
  list-style:none;
}

.acn-support__shot{
  margin:0;
}

/* ---------------------------------------------------------------- FAQ -- */
/* Full-width rows on the pale ground, one hairline between them and one above
   the first, each row a native details: the question is the summary the visitor
   presses, the answer the block that opens under it. No script, no roles and no
   keyboard work are added — the browser already owns the open state. */
.acn-faq__list{
  border-top:1px solid var(--color-line);
}

.acn-faq__item{
  border-bottom:1px solid var(--color-line);
}

.acn-faq__question{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  cursor:pointer;
  list-style:none;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  color:var(--color-heading);
  transition:color var(--transition-fast);
}

/* The marker the browser draws in the gutter is replaced by one the row can carry
   in the site's own colours at both ends of the state: a plus while the answer is
   closed, a minus while it is open. It is a character in the stylesheet — not a
   drawing, not a second element and not an animation — and the summary keeps the
   behaviour the browser gives it. */
.acn-faq__question::-webkit-details-marker{
  display:none;
}

.acn-faq__question::after{
  content:"+";
  flex:none;
  width:24px;
  font-size:22px;
  line-height:1;
  text-align:center;
  color:var(--color-accent);
}

.acn-faq__item[open] > .acn-faq__question::after{
  content:"−";
}

.acn-faq__question:hover{
  color:var(--color-accent);
}

/* The site's focus outline, on the row rather than on the character inside it, so
   a keyboard visitor sees which question the next press will open. */
.acn-faq__question:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:3px;
}

/* The open answer: the section's own ground, the page's own text colour and a
   measure that stays readable at every width. Nothing is dimmed, so a row that is
   open reads as well as a row that is closed. */
.acn-faq__answer{
  padding:0 0 24px;
}

.acn-faq__text{
  margin:0;
  max-width:70ch;
  font-size:15px;
  line-height:1.6;
}

/* The routes on from an answer, printed under the sentence rather than folded
   into it. */
.acn-faq__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin:16px 0 0;
  max-width:none;
}

.acn-faq__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:color var(--transition-fast);
}

.acn-faq__link:hover,
.acn-faq__link:focus-visible{
  color:var(--color-accent-dark);
  text-decoration:underline;
}

/* ----------------------------------------------------------- Layout -- */
/* Two columns through the middle of the range, one column below 760px, where a
   benefit card and a photograph each take the full width of the container. The
   FAQ rows need no breakpoint: a question wraps and the answer keeps its
   70-character measure down to 320px. */
@media (max-width:1020px){
  .acn-support__grid,
  .acn-support__shots{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .acn-support__grid,
  .acn-support__shots{
    grid-template-columns:minmax(0,1fr);
  }

  .acn-faq__question{
    gap:14px;
    padding:18px 0;
    font-size:16px;
  }
}