/*
 * Printed & digital products page (paiement/products.php, ticket 424).
 * Loaded after logos-by-industry.css: hero + tab bar come from there, product cards
 * from style-2024-industry.css (homepage parity). This file holds the Figma deltas only.
 */

/* ---------- Hero: Figma title 45px / subtitle 20px, line-height 100% (lbi hero keeps 60px padding + 14px gap) ---------- */
@media screen and (min-width: 769px) {
  body.page-industry .headline.first-line.pp-hero .lbi-hero__title {
    font-size: 45px !important;
    line-height: 1 !important;
  }

  /* Full title width (lbi caps the subtitle at 800px) so long FR/DE subtitles stay on one line. */
  body.page-industry .headline.first-line.pp-hero .lbi-hero__subtitle {
    max-width: 1480px !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
}

/* Mobile: hero starts right below the 60px fixed header (body has no top padding on mobile), with 60px
   above the title and below the subtitle (lbi's 40px padding + 30px content margins gave 10px / 70px). */
@media screen and (max-width: 768px) {
  body.page-industry .headline.first-line.pp-hero {
    margin-top: 60px !important;
    padding: 60px 0 !important;
  }

  body.page-industry .headline.first-line.pp-hero .lbi-hero__content {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* The industry title also carries a 20px top margin on mobile. */
  body.page-industry .headline.first-line.pp-hero .lbi-hero__title {
    margin-top: 0 !important;
  }
}

/* ---------- Toolbar: bubble menu (All / Print; Digital hidden for now) + funnel "skip" button on one line.
   Bubbles always centred; the skip button (when shown) sits on the right of the same line. ---------- */
.pp-section .pp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  float: none;
  margin-bottom: 0;
}

/* Bubbles stay centred on the page, skip button pinned right: 3 columns with equal side
   columns (the empty left one balances the button). */
.pp-section .pp-toolbar--with-skip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.pp-section .pp-toolbar--with-skip .pp-filters {
  grid-column: 2;
}

.pp-section .pp-toolbar--with-skip .pp-skip {
  grid-column: 3;
  justify-self: end;
}

.pp-section .pp-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Skip button (logged-in users coming from logo creation): same look as an unselected bubble,
   Figma 42px tall, radius 24px, padding 10px 20px, 8px gap before the arrow icon. */
.pp-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 1px solid #e7e7e7;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 2px 5px 0 #dfe5eb40;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #3e5059;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.pp-skip:hover,
.pp-skip:focus {
  border-color: #26a5aa;
  color: #3e5059;
  text-decoration: none;
}

.pp-skip:focus {
  outline: none;
}

.pp-skip:focus-visible {
  outline: 2px solid #26a5aa;
  outline-offset: 2px;
}

/* Label box = exactly one 16px line so flex centres the glyphs, not the font's ascender/descender space. */
.pp-skip__label {
  display: block;
  line-height: 16px;
}

/* Arrow centred on the text's optical middle: Open Sans sits ~1px low in its line box
   (lowercase + descenders), so the arrow follows it down 1px. */
.pp-skip svg {
  display: block;
  flex-shrink: 0;
  transform: translateY(1px);
}

/* Mobile: no room for one line — skip button on top, then both bubbles side by side on one line
   (smaller text/padding so the longest pair, PL "Wszystkie produkty" + "Produkty drukowane", fits at 320px). */
@media screen and (max-width: 768px) {
  .pp-section .pp-toolbar--with-skip {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .pp-section .pp-toolbar--with-skip .pp-skip {
    order: -1;
  }

  .pp-section .pp-filters {
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
  }

  .pp-section .pp-filter {
    min-width: 0;
    padding: 0 clamp(8px, 3.3vw, 16px);
    font-size: clamp(11px, 3.6vw, 14px);
  }
}

.pp-filter {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border: 1px solid #e7e7e7;
  border-radius: 21px;
  background: #ffffff;
  box-shadow: 0 2px 5px 0 #dfe5eb40;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: #3e5059;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.pp-filter:hover {
  border-color: #26a5aa;
}

.pp-filter.is-active {
  border-color: #26a5aa;
  background: #26a5aa;
  color: #ffffff;
}

.pp-filter:focus {
  outline: none;
}

.pp-filter:focus-visible {
  outline: 2px solid #26a5aa;
  outline-offset: 2px;
}

/* ---------- Product tab bar: links to product pages. Figma text 15px / 100% / #363F5A
   (20px tall item); selected = lbi .is-active (bold + green underline). ---------- */
.pp-section .lbi-tab {
  font-size: 15px;
  line-height: 1;
  color: #363f5a;
  text-decoration: none;
}

.pp-section .lbi-tab:hover,
.pp-section .lbi-tab:focus {
  color: #363f5a;
  text-decoration: none;
}

.pp-section .lbi-tab[hidden] {
  display: none;
}

/* ---------- Bubble toolbar + product menu (tab bar): tab bar 40px below the bubbles. Both as wide as the
   card grid, so the skip button lines up with the right edge of the cards: full 1816px row from 2000px
   (3 cards), 1200px below (2 × 584 + 32px gap). ---------- */
.pp-section .pp-tabs-wrap {
  margin-top: 40px;
}

@media screen and (min-width: 769px) and (max-width: 1999px) {
  .pp-section .pp-toolbar,
  .pp-section .pp-tabs-wrap {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Product cards: homepage card (radius 10px, shadow 0 3px 15px #3E50591A,
   image inset 5px top / 6px left), 3 per row from 2000px (2 below, see the breakpoints further down).
   Figma size is 584×320 / image 292×310 — cards reach it on wide screens (row 3×584 + 2×32 = 1816px)
   and scale down proportionally below. ---------- */
body.page-industry .headline-inspiration.pp-section > .container > .row {
  max-width: 1816px !important;
}

body.page-industry .pp-section .home-products-showcase__grid.pp-grid {
  grid-template-columns: repeat(3, minmax(0, 584px));
  column-gap: 32px;
  row-gap: 32px;
  max-width: none;
  margin-top: 40px !important;
  justify-content: center;
}

/* Whole card clickable: the "See … templates" link stretches over the card (same href as the image link). */
.pp-grid .home-product-card {
  position: relative;
  cursor: pointer;
}

.pp-grid .home-product-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 10px;
}

.pp-grid .home-product-card:hover .home-product-card__link {
  color: #26a5aa;
}

/* No focus ring on the card links after a click (the stretched link would outline the text only). */
.pp-grid .home-product-card__link:focus,
.pp-grid .home-product-card__link:focus-visible,
.pp-grid .home-product-card__media-link:focus,
.pp-grid .home-product-card__media-link:focus-visible {
  outline: none;
  box-shadow: none;
}

.pp-grid .home-product-card[hidden] {
  display: none;
}

@media screen and (min-width: 769px) {
  /* Side gutter once the 1816px row no longer fits (industry .container has 0 padding). */
  body.page-industry .headline-inspiration.pp-section > .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Every card as tall as the tallest one, so the "See … templates" links — pinned to the
     bottom by the homepage margin-top:auto — line up even with 2-line FR titles. */
  body.page-industry .pp-section .home-products-showcase__grid.pp-grid {
    grid-auto-rows: 1fr;
  }

  /* Homepage card is fixed 584×320 — let it scale with its column; min-height = 320px at full size. */
  .pp-grid .home-product-card {
    width: 100%;
    max-width: 584px;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  /* Image: half the card, 292:310 (stretches with object-fit: cover if the text makes the card taller). */
  .pp-grid .home-product-card__media {
    flex: 0 0 50%;
    width: 50%;
    height: auto;
    aspect-ratio: 292 / 310;
  }
}

/* Card text (Figma): left aligned; title 20px/100% bold #000; description 16px/27px #3E5059;
   link 14px/25px #363F5A with the chevron 16px before the text (12px gap + icon) — the homepage
   card already has the description + link values, set here so the page can't drift. */
.pp-grid .home-product-card__content {
  text-align: left;
}

/* The card title is an <h2> here (h3 on the homepage) — industry CSS centres every h2
   (`.menu-footer-line h2, .tools-line h2, h2 { text-align: center }`), so set it on the title itself. */
.pp-grid .home-product-card__title {
  text-align: left;
}

/* Long link texts (e.g. "See vertical business card templates" ≈ 245px vs a ~180–230px text
   column) wrap: keep the chevron on the first line and the lines left-aligned with each other. */
.pp-grid .home-product-card__link {
  align-items: flex-start;
}

.pp-grid .home-product-card__link-icon {
  height: 25px;
}

/* Desktop only — mobile keeps the homepage's stacked-card sizes (18px title, 16px link). */
@media screen and (min-width: 769px) {
  .pp-grid .home-product-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #000000;
  }

  .pp-grid .home-product-card__desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    color: #3e5059;
  }

  .pp-grid .home-product-card__link {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
    color: #363f5a;
  }

  /* Keep the homepage teal hover (the colour above would otherwise win). */
  .pp-grid .home-product-card__link:hover {
    color: #26a5aa;
  }
}

/* Below 3 columns the cards match the homepage product showcase exactly: fixed 584px columns,
   card 584×320 (min-height, so a long FR title can still grow it), image 292×310, gaps 32/28.
   3 columns from 2000px only (3×584 + gaps needs ~1880px); everything narrower gets 2. */
@media screen and (min-width: 769px) and (max-width: 1999px) {
  body.page-industry .pp-section .home-products-showcase__grid.pp-grid {
    grid-template-columns: repeat(2, 584px);
    column-gap: 32px;
    row-gap: 28px;
  }

  .pp-grid .home-product-card {
    width: 584px;
    min-height: 320px;
  }

  .pp-grid .home-product-card__media {
    flex: 0 0 292px;
    width: 292px;
    height: auto;
    min-height: 310px;
    aspect-ratio: auto;
  }
}

/* Two 584px cards + gap + the 32px side gutters no longer fit: one centred 584px card, as the homepage does below 1240px. */
@media screen and (min-width: 769px) and (max-width: 1264px) {
  body.page-industry .pp-section .home-products-showcase__grid.pp-grid {
    grid-template-columns: minmax(0, 584px);
  }

  .pp-grid .home-product-card {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .pp-section .pp-tabs-wrap {
    margin-top: 40px;
  }

  body.page-industry .pp-section .home-products-showcase__grid.pp-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
    margin-top: 40px !important;
  }
}

/* ======================================================================
   "How to create your products" — 4 alternating image/text steps (1200px wide)
   ====================================================================== */

/* 60px between the product cards and this section (lbi gives the cards section 80px/50px bottom padding). */
body.page-industry .headline-inspiration.inspiration-section.pp-section {
  padding-bottom: 0 !important;
}

/* 80px below the last step is the section's own padding, so it can't collapse into the next section. */
.pp-steps {
  padding: 60px 32px 80px;
  background: #ffffff;
}

.pp-step:last-child {
  margin-bottom: 0;
}

.pp-steps__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.pp-steps__title {
  max-width: 1200px;
  margin: 0 auto 8px;
  font-family: "Open Sans", sans-serif;
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #363f5a;
}

.pp-steps__subtitle {
  max-width: 1200px;
  margin: 0 auto 80px;
  font-family: "Open Sans", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: #363f5a;
}

/* Step: image 410px | 140px | text. Even steps mirror (text left, image right). 80px between steps. */
.pp-step {
  display: grid;
  grid-template-columns: 410px minmax(0, 1fr);
  column-gap: 140px;
  align-items: start;
  margin-bottom: 80px;
}

.pp-step:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) 410px;
}

.pp-step:nth-of-type(even) .pp-step__media {
  order: 2;
}

/* Figma frame: 410×330, radius 10px, shadow 0 6px 16px #3E50594D. The image is cropped to the
   card area (see $pp_steps: --pp-img-w / -x / -y), so baked-in shadows are hidden. */
.pp-step__media {
  position: relative;
  width: 100%;
  max-width: 410px;
  aspect-ratio: 410 / 330;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px 0 #3e50594d;
  background: #ffffff;
}

.pp-step__media img {
  position: absolute;
  left: calc(var(--pp-img-x, 0) / 410 * -100%);
  top: calc(var(--pp-img-y, 0) / 330 * -100%);
  width: calc(var(--pp-img-w, 410) / 410 * 100%);
  max-width: none;
  height: auto;
  display: block;
}

.pp-step__content {
  padding-top: 12px;
}

.pp-step__title {
  margin: 0 0 24px;
  font-family: "Open Sans", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  color: #363f5a;
}

.pp-step__text {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #3e5059;
}

.pp-step__text p {
  margin: 0 0 28px;
}

.pp-step__text p:last-child {
  margin-bottom: 0;
}

/* Tablet: shrink the image column with the text. */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  .pp-step,
  .pp-step:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
  }

  .pp-step:nth-of-type(even) .pp-step__media {
    justify-self: end;
  }
}

/* Mobile: image on top, text below, for every step. */
@media screen and (max-width: 768px) {
  .pp-steps {
    padding: 40px 25px 50px;
  }

  .pp-steps__title {
    font-size: 24px;
    line-height: 1.2;
  }

  .pp-steps__subtitle {
    margin-bottom: 40px;
    font-size: 16px;
  }

  .pp-step,
  .pp-step:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    margin-bottom: 50px;
  }

  .pp-step:nth-of-type(even) .pp-step__media {
    order: 0;
  }

  .pp-step:last-child {
    margin-bottom: 0;
  }

  .pp-step__media {
    justify-self: center;
  }

  .pp-step__content {
    padding-top: 0;
  }

  .pp-step__title {
    margin-bottom: 16px;
    font-size: 20px;
  }
}

/* ======================================================================
   Testimonials — homepage section (includes/home-testimonials.php, styles in logos-by-industry.css).
   Page deltas: steps' 80px bottom is the gap above the title; 60px title → cards;
   60px cards → dots (already lbi); 80px section bottom (already lbi on desktop).
   ====================================================================== */
@media screen and (min-width: 769px) {
  body.page-industry.page-products .testimonials-section .new-title-home {
    margin-top: 0;
  }

  body.page-industry.page-products
    .testimonials-section
    .testimonials-container {
    margin-top: 60px;
  }
}

/* ======================================================================
   FAQ — homepage accordion (includes/home-faq.php, styles in logos-by-industry.css).
   Page deltas: #F7F9FC band, 60px top / 80px bottom padding, 60px title → questions.
   ====================================================================== */
body.page-industry.page-products .home-faq-accordion-section {
  background: #f7f9fc;
}

@media screen and (min-width: 769px) {
  body.page-industry.page-products .home-faq-accordion-section {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  body.page-industry.page-products .home-faq-accordion__title {
    margin-bottom: 60px;
  }
}