/* CaféÉquipe's landing page (issue #51), products/templates/products/
 * cafe_equipe_page.html.
 *
 * THE PRODUCT'S BRAND, NOT THE SITE'S, inside the site's header and footer:
 * espresso #1E120C, cream #FBF7F1, the caramel accent #C89F72 and the browns
 * between #4A3628 and #A08B78; Poppins for headings and Roboto for text
 * (tokens.css, --ed-font-cafe-*); buttons at 10px and cards at 12px.
 *
 * ITS COLOURS ARE ITS OWN, here and nowhere else, so they are named here
 * (--ce-*) rather than in tokens.css. Every small text pair passes 4.5:1,
 * measured in products/tests.py.
 *
 * Phone first: one column, then two and three as the width allows, at em
 * breakpoints so a larger text size gets the roomier layout sooner.
 */

.ce {
  --ce-espresso: #1E120C;
  --ce-cream: #FBF7F1;
  --ce-caramel: #C89F72;
  --ce-brown: #4A3628;
  --ce-mute: #5C4636;
  --ce-sand: #F0E6D8;
  --ce-sand-dark: #E6D7C3;
  --ce-white: #FFFFFF;
  --ce-roast: #33221A;
  --ce-roast-light: #4A3226;
  --ce-on-dark: #E3D3BE;
  --ce-radius-btn: 10px;
  --ce-radius-card: 12px;
  --ce-radius-small: 8px;
  --ce-shadow: 0 1px 2px rgba(30, 18, 12, 0.05), 0 12px 32px -20px rgba(30, 18, 12, 0.2);
  --ce-section-y: clamp(64px, 9vw, 120px);

  background: var(--ce-cream);
  color: var(--ce-espresso);
  font-family: var(--ed-font-cafe-body);
  font-size: var(--ed-size-body);
  line-height: 1.55;
}

.ce *:focus-visible {
  outline: 2px solid var(--ce-espresso);
  outline-offset: 3px;
  box-shadow: none;
}

.ce-wrap {
  inline-size: 100%;
  max-inline-size: var(--ed-maxw);
  margin-inline: auto;
  padding-inline: var(--ed-gutter);
}

.ce-section { padding-block: var(--ce-section-y) 0; }

.ce-h2 {
  margin: 0;
  font-family: var(--ed-font-cafe-display);
  font-size: var(--ed-size-cafe-h2);
  font-weight: var(--ed-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ce-h2--light { color: var(--ce-cream); }

.ce-h3 {
  margin: 0;
  font-family: var(--ed-font-cafe-display);
  font-size: var(--ed-size-title);
  font-weight: var(--ed-weight-semibold);
  line-height: 1.25;
}

.ce-head { max-inline-size: 40rem; margin-block-end: 32px; }

.ce-lede {
  margin: 14px 0 0;
  color: var(--ce-mute);
  font-size: var(--ed-size-lead);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- Buttons: 10px corners, 44px at the least ------------------------- */

.ce-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  padding: 10px 26px;
  border-radius: var(--ce-radius-btn);
  font-family: var(--ed-font-cafe-body);
  font-size: var(--ed-size-body);
  font-weight: var(--ed-weight-medium);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--ed-transition-quick), color var(--ed-transition-quick);
}

.ce-btn--dark { background: var(--ce-espresso); color: var(--ce-cream); }
.ce-btn--dark:hover { background: var(--ce-brown); color: var(--ce-cream); }

.ce-btn--outline {
  background: transparent;
  color: var(--ce-espresso);
  box-shadow: inset 0 0 0 2px var(--ce-espresso);
}
.ce-btn--outline:hover { background: var(--ce-espresso); color: var(--ce-cream); }

.ce-btn--cream { background: var(--ce-cream); color: var(--ce-espresso); }
.ce-btn--cream:hover { background: var(--ce-sand); color: var(--ce-espresso); }

/* ---- 1. The hero ------------------------------------------------------- */

.ce-hero { padding-block: clamp(40px, 7vw, 96px) 0; }

.ce-hero__grid { display: grid; gap: 40px; align-items: center; }

.ce-hero__mark { display: block; inline-size: 52px; block-size: auto; }

.ce-hero__title {
  margin: 18px 0 0;
  font-family: var(--ed-font-cafe-display);
  font-size: var(--ed-size-cafe-h1);
  font-weight: var(--ed-weight-regular);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.ce-wordmark__cafe { font-weight: var(--ed-weight-bold); }

.ce-hero__tagline {
  margin: 12px 0 0;
  color: var(--ce-brown);
  font-family: var(--ed-font-cafe-display);
  font-size: var(--ed-size-title);
  font-weight: var(--ed-weight-medium);
}

.ce-hero__pitch {
  max-inline-size: 34rem;
  margin: 20px 0 28px;
  color: var(--ce-mute);
  font-size: var(--ed-size-lead-lg);
  line-height: 1.6;
  text-wrap: pretty;
}

.ce-hero__visual { position: relative; }

.ce-hero__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--ce-radius-card);
}

/* The panel of what it runs sits under the photo on a phone and over its
 * lower corner where there is room. */
.ce-hero__panel {
  position: relative;
  margin: -32px 12px 0;
  padding: 14px;
  border-radius: var(--ce-radius-card);
  background: var(--ce-espresso);
  color: var(--ce-cream);
  box-shadow: var(--ce-shadow);
}

.ce-browser {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--ce-radius-small);
  background: var(--ce-roast);
}

.ce-browser__dots { display: flex; gap: 6px; flex: none; }
.ce-browser__dots span {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--ce-roast-light);
}

.ce-browser__address {
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  color: var(--ce-on-dark);
  font-size: var(--ed-size-small);
}
.ce-browser__address img { flex: none; border-radius: 5px; }

.ce-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ce-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--ce-radius-small);
  background: var(--ce-roast);
}

.ce-tile__icon,
.ce-group__icon {
  inline-size: 26px;
  block-size: 26px;
  margin-block-end: 8px;
  fill: none;
  stroke: var(--ce-caramel);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ce-tile__name {
  font-family: var(--ed-font-cafe-display);
  font-size: var(--ed-size-nav);
  font-weight: var(--ed-weight-semibold);
}
.ce-tile__what { color: var(--ce-on-dark); font-size: var(--ed-size-caption); }

/* ---- Cards and lists, shared ------------------------------------------- */

.ce-card {
  overflow: hidden;
  border-radius: var(--ce-radius-card);
  background: var(--ce-white);
  box-shadow: var(--ce-shadow);
}

.ce-card--dark { background: var(--ce-espresso); color: var(--ce-cream); box-shadow: none; }

.ce-group__text { margin: 0; color: var(--ce-on-dark); font-size: var(--ed-size-body); line-height: 1.55; }

.ce-checks {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ce-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.ce-checks li::before {
  content: "";
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23FBF7F1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px no-repeat,
    var(--ce-caramel);
}

/* ---- 2. Built for -------------------------------------------------------- */

.ce-for { display: grid; gap: 20px; }

.ce-for__card { display: flex; flex-direction: column; }

.ce-for__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.ce-for__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 24px; }
.ce-for__text { margin: 0; color: var(--ce-mute); line-height: 1.55; }

/* ---- 3. What it does: five panels, tabs once the script runs ---------- */

.ce-tabs__list {
  display: flex;
  gap: 6px;
  margin-block-end: 24px;
  padding: 6px;
  overflow-x: auto;
  border-radius: var(--ce-radius-card);
  background: var(--ce-sand);
  scrollbar-width: none;
}

.ce-tabs__list[hidden] { display: none; }
.ce-tabs__list::-webkit-scrollbar { display: none; }

.ce-tabs__tab {
  flex: 1 0 auto;
  min-block-size: var(--ed-target);
  padding: 8px 18px;
  border: 0;
  border-radius: var(--ce-radius-btn);
  background: transparent;
  color: var(--ce-espresso);
  font-family: var(--ed-font-cafe-display);
  font-size: var(--ed-size-body);
  font-weight: var(--ed-weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ed-transition-quick), color var(--ed-transition-quick);
}

.ce-tabs__tab:hover { background: var(--ce-sand-dark); }
.ce-tabs__tab[aria-selected="true"] { background: var(--ce-espresso); color: var(--ce-cream); }

.ce-tabs__panel {
  display: grid;
  gap: 24px;
  overflow: hidden;
  border-radius: var(--ce-radius-card);
  background: var(--ce-white);
  box-shadow: var(--ce-shadow);
}

.ce-tabs__panel + .ce-tabs__panel { margin-block-start: 20px; }

/* ONE HEIGHT FOR EVERY TAB. Once the script has made them tabs, the panels
 * share one grid cell under the tab list, so the cell is as tall as the
 * tallest and switching tabs never moves the page below. A panel not shown
 * keeps its place but is invisible, which also takes it out of the
 * keyboard's and a screen reader's way, as `hidden` would. */
.ce-tabs--on { display: grid; grid-template-columns: minmax(0, 1fr); }
.ce-tabs--on .ce-tabs__list { grid-row: 1; }
.ce-tabs--on .ce-tabs__panel { grid-row: 2; grid-column: 1; margin-block-start: 0; }
.ce-tabs--on .ce-tabs__panel[hidden] { display: grid; visibility: hidden; }

.ce-tabs__photo {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 220px;
  max-block-size: 420px;
  object-fit: cover;
}

.ce-tabs__body { display: flex; flex-direction: column; gap: 18px; padding: 0 24px 28px; }

/* ---- 4. Also in it ------------------------------------------------------- */

.ce-also { display: grid; gap: 16px; }
.ce-also__card { display: flex; flex-direction: column; gap: 6px; padding: 24px; }

/* ---- 5. Questions: native disclosures ------------------------------------
 * The summary keeps its list-item box (Safari drops its role otherwise);
 * only its marker goes, and the sign is drawn instead. */

.ce-faq { display: grid; gap: 28px; }
.ce-faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.ce-faq__list { display: flex; flex-direction: column; gap: 10px; }

.ce-faq__item { border-radius: var(--ce-radius-card); background: var(--ce-sand); }
.ce-faq__item[open] { background: var(--ce-white); box-shadow: var(--ce-shadow); }

.ce-faq__q {
  position: relative;
  display: list-item;
  list-style: none;
  min-block-size: var(--ed-target);
  padding-block: 20px;
  padding-inline: 22px 70px;
  border-radius: var(--ce-radius-card);
  cursor: pointer;
}

.ce-faq__q::-webkit-details-marker { display: none; }
.ce-faq__q::marker { content: ""; }

.ce-faq__text { font-size: var(--ed-size-nav); font-weight: var(--ed-weight-medium); }

.ce-faq__sign {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 22px;
  inline-size: 32px;
  block-size: 32px;
  margin-block-start: -16px;
  border-radius: var(--ce-radius-btn);
  background: var(--ce-espresso);
}

.ce-faq__sign::before,
.ce-faq__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 15px;
  inset-inline-start: 10px;
  inline-size: 12px;
  block-size: 2px;
  border-radius: 1px;
  background: var(--ce-cream);
}

.ce-faq__sign::after { transform: rotate(90deg); }
.ce-faq__item[open] .ce-faq__sign::after { display: none; }

.ce-faq__a {
  max-inline-size: 40rem;
  margin: 0;
  padding: 0 22px 22px;
  color: var(--ce-mute);
  line-height: 1.6;
}

/* ---- 6. Pricing, by way of sales: no price on the page --------------- */

.ce-sales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 5vw, 48px);
}

.ce-sales__text { max-inline-size: 40rem; }

/* ---- 7. Talk to sales: the site's inquiry form above the footer ------- */

.ce-closing { padding-block: var(--ce-section-y) clamp(48px, 8vw, 96px); }

.ce-closing__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ce-radius-card);
  background: var(--ce-espresso);
  color: var(--ce-cream);
}

.ce-closing__photo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.ce-closing__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 18, 12, 0.94) 0%, rgba(30, 18, 12, 0.82) 50%, rgba(30, 18, 12, 0.6) 100%);
}

.ce-closing__shade:dir(rtl) { transform: scaleX(-1); }

.ce-closing__body {
  position: relative;
  display: grid;
  gap: 32px;
  align-items: center;
  padding: clamp(20px, 5vw, 56px) clamp(16px, 5vw, 48px);
}

.ce-closing__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-inline-size: 30rem;
}

.ce-closing__mark { inline-size: 40px; block-size: auto; }

.ce-closing__text {
  margin: 0;
  color: var(--ce-sand);
  font-size: var(--ed-size-lead);
  line-height: 1.6;
}

.ce-closing__form { min-inline-size: 0; }

/* ---- Wider screens ------------------------------------------------------ */

@media (min-width: 40em) {
  .ce-for { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-also { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 56em) {
  .ce-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .ce-hero__visual { padding-block-end: 150px; }
  .ce-hero__panel {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: -32px;
    inline-size: min(72%, 380px);
    margin: 0;
  }
  .ce-for { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ce-also { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ce-tabs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
  /* The photo fills its half and never sets the height: the text and a
   * floor do, so a tall photo does not stretch every tab. */
  .ce-tabs__photo { contain: size; aspect-ratio: auto; min-block-size: 400px; max-block-size: none; }
  .ce-tabs__body { justify-content: center; padding: 40px; }
  .ce-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
  .ce-closing__body { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .ce-btn,
  .ce-tabs__tab { transition: none; }
}