/*
 * Product description block patterns ("IT Media" category, patterns/*.php).
 * Loaded on product pages (inside .itm-desc) and in the product block editor
 * (inside .editor-styles-wrapper), so both look the same.
 */

:is(.itm-desc, .editor-styles-wrapper) {
  --itm-ink: #17140f;
  --itm-ink-2: #3d3832;
  --itm-muted: #5c554c;
  --itm-muted-2: #6b645b;
  --itm-muted-3: #8a8278;
  --itm-line: #ece7e0;
  --itm-row-line: #f1ece5;
  --itm-input-border: #ddd6cc;
  --itm-soft: #f3efe9;
  --itm-white: #fff;
  --itm-on-dark: #faf8f5;
  --itm-on-dark-3: #c9c1b6;
  --itm-font: "Schibsted Grotesk", Arial, sans-serif;
  --itm-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Martfury is a classic theme without theme.json, so WordPress wraps Group
   block content in .wp-block-group__inner-container. Layout rules for groups
   (grids) target that wrapper, or the group itself when there is none. */

/* Vertical rhythm between top-level blocks on the product page. Blocks below
   only reset their side and bottom margins so this top margin survives. */
.itm-desc--blocks > * + * {
  margin-top: 112px;
}

.itm-desc--blocks > .itm-text + .itm-text {
  margin-top: 48px;
}

/* A wide image right after a text section illustrates that text. */
.itm-desc--blocks > .itm-text + .itm-image-wide {
  margin-top: 32px;
}

/* Shared atoms */
:is(.itm-desc, .editor-styles-wrapper) .itm-eyebrow {
  margin: 0 0 14px;
  font-family: var(--itm-font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--itm-muted-2);
}

:is(.itm-desc, .editor-styles-wrapper) h2.itm-h2 {
  margin: 0 0 20px;
  font-family: var(--itm-font);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--itm-ink);
  text-wrap: balance;
}

:is(.itm-desc, .editor-styles-wrapper) :is(.itm-text, .itm-benefits, .itm-audience, .itm-apps-section, .itm-compare-section, .itm-faq) p:not(.itm-eyebrow) {
  margin: 0 0 16px;
  font-family: var(--itm-font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--itm-muted);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-text:not(.itm-text--2col) p:not(.itm-eyebrow) {
  max-width: 760px;
}

:is(.itm-desc, .editor-styles-wrapper) :is(p, li) :is(strong, b) {
  font-weight: 600;
  color: var(--itm-ink);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-link a {
  font-size: 16px;
  font-weight: 600;
  color: var(--itm-ink);
  text-decoration: none;
}

/* P1b: text in two columns (heading left, text right), both aligned to the
   top: the text is often longer than the heading. Overrides the bottom
   alignment saved in earlier copies of the pattern. */
:is(.itm-desc, .editor-styles-wrapper) .itm-text--2col .wp-block-columns {
  align-items: flex-start;
  gap: 72px;
  margin: 0;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-text--2col .wp-block-column {
  align-self: flex-start;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-text--2col .itm-h2 {
  margin-bottom: 0;
}

/* P2: benefits. The intro and closing paragraphs keep a readable line length. */
:is(.itm-desc, .editor-styles-wrapper) .itm-benefits > p:not(.itm-eyebrow),
:is(.itm-desc, .editor-styles-wrapper) .itm-benefits > .wp-block-group__inner-container > p:not(.itm-eyebrow) {
  max-width: 760px;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-benefits .wp-block-columns {
  gap: 48px;
  margin: 12px 0 0;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-benefits ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-benefits li {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--itm-line);
  font-size: 16px;
  line-height: 1.55;
  color: var(--itm-muted);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-benefits li:last-child {
  border-bottom: 1px solid var(--itm-line);
}

/* P3: audience with numbered rows */
:is(.itm-desc, .editor-styles-wrapper) .itm-audience {
  gap: 72px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

:is(.itm-desc, .editor-styles-wrapper) ol.itm-numbered {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: itm-numbered;
}

:is(.itm-desc, .editor-styles-wrapper) ol.itm-numbered li {
  position: relative;
  margin: 0;
  padding: 20px 0 20px 52px;
  border-top: 1px solid var(--itm-line);
  font-size: 16px;
  line-height: 1.5;
  color: var(--itm-muted);
  counter-increment: itm-numbered;
}

:is(.itm-desc, .editor-styles-wrapper) ol.itm-numbered li:last-child {
  border-bottom: 1px solid var(--itm-line);
}

:is(.itm-desc, .editor-styles-wrapper) ol.itm-numbered li::before {
  content: counter(itm-numbered, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 0;
  font-family: var(--itm-font-mono);
  font-size: 13px;
  color: var(--itm-muted-3);
}

:is(.itm-desc, .editor-styles-wrapper) ol.itm-numbered li strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--itm-ink);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-audience__image img,
:is(.itm-desc, .editor-styles-wrapper) .itm-audience .wp-block-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  object-fit: cover;
}

/* P4: apps grid */
:is(.itm-desc, .editor-styles-wrapper) .itm-apps-section__intro {
  gap: 72px;
  margin: 0 0 40px;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-apps-section__intro .itm-h2 {
  margin-bottom: 0;
}

:is(.itm-desc, .editor-styles-wrapper) :is(.itm-apps > .wp-block-group__inner-container, .itm-apps:not(:has(> .wp-block-group__inner-container))) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-apps .itm-app-card {
  margin: 0;
}

:is(.itm-desc, .editor-styles-wrapper) :is(.itm-app-card > .wp-block-group__inner-container, .itm-app-card:not(:has(> .wp-block-group__inner-container))) {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-app-card {
  padding: 28px;
  border: 1px solid var(--itm-line);
  border-radius: 24px;
  background: var(--itm-white);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-app-card__icon {
  margin: 0;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-app-card__icon img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  object-fit: contain;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-app-card__text h3 {
  margin: 0 0 8px;
  font-family: var(--itm-font);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--itm-ink);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-app-card__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--itm-muted);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-apps-section p.itm-link:not(.itm-eyebrow) {
  margin: 28px 0 0;
}

/* P5: dark banner */
:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark {
  gap: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  overflow: hidden;
  border-radius: 32px;
  background: var(--itm-ink);
  color: var(--itm-on-dark);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__text {
  padding: 64px;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark .itm-eyebrow {
  color: var(--itm-on-dark-3);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark h2.itm-h2 {
  font-size: 40px;
  color: var(--itm-on-dark);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark p:not(.itm-eyebrow) {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--itm-on-dark-3);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark .wp-block-button__link {
  border-radius: 999px;
  background: var(--itm-on-dark);
  color: var(--itm-ink);
  font-weight: 600;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__media {
  align-self: stretch;
  min-height: 380px;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__image {
  height: 100%;
  margin: 0;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__image img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark--gallery .itm-banner-dark__media {
  padding: 40px 40px 40px 0;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__gallery {
  --wp--style--unstable-gallery-gap: 12px; /* Core computes the image widths from this. */
  gap: 12px;
  margin: 0;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__gallery {
  flex-wrap: nowrap !important;
}

/* Three images in one row regardless of core's last-image stretching. */
:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__gallery > figure.wp-block-image {
  flex: 1 1 0 !important;
  width: auto !important;
  margin: 0 !important;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__gallery img {
  aspect-ratio: 3 / 4;
  height: auto !important;
  border-radius: 16px;
  object-fit: cover;
}

/* P6: plan comparison */
:is(.itm-desc, .editor-styles-wrapper) .itm-compare {
  margin: 28px 0 0;
  overflow-x: auto;
  border: 1px solid var(--itm-line);
  border-radius: 24px;
  background: var(--itm-white);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-compare table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-compare :is(th, td) {
  padding: 18px 32px;
  border: 0;
  border-top: 1px solid var(--itm-row-line);
  background: transparent;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  color: var(--itm-ink);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-compare thead {
  border-bottom: 0; /* Core draws a 3px line under the table head. */
}

:is(.itm-desc, .editor-styles-wrapper) .itm-compare thead :is(th, td) {
  border-top: 0;
  border-bottom: 0;
  font-size: 22px;
  font-weight: 700;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-compare :is(th, td):first-child {
  text-align: left;
  font-size: 16px;
  color: var(--itm-ink-2);
}

/* The recommended plan: third column. */
:is(.itm-desc, .editor-styles-wrapper) .itm-compare :is(th, td):nth-child(3) {
  background: var(--itm-soft);
}

/* Footnotes under the table (paragraph with the class itm-compare-notes). */
:is(.itm-desc, .editor-styles-wrapper) .itm-compare-section p.itm-compare-notes {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--itm-muted-2);
}

/* P7: FAQ */
:is(.itm-desc, .editor-styles-wrapper) .itm-faq .wp-block-details {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--itm-line);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-faq .wp-block-details:last-child {
  border-bottom: 1px solid var(--itm-line);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-faq summary {
  position: relative;
  padding: 24px 48px 24px 0;
  font-family: var(--itm-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--itm-ink);
  list-style: none;
  cursor: pointer;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-faq summary::-webkit-details-marker {
  display: none;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  font-size: 26px;
  font-weight: 400;
  transform: translateY(-50%);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-faq details[open] > summary::after {
  content: "−";
}

:is(.itm-desc, .editor-styles-wrapper) .itm-faq .wp-block-details > :not(summary) {
  max-width: 820px;
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--itm-muted);
}

:is(.itm-desc, .editor-styles-wrapper) .itm-faq .wp-block-details > :last-child:not(summary) {
  margin-bottom: 24px;
}

/* P8: wide image */
:is(.itm-desc, .editor-styles-wrapper) .itm-image-wide {
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-image-wide img {
  width: 100%;
  height: auto;
  border-radius: 24px;
}

:is(.itm-desc, .editor-styles-wrapper) .itm-image-wide figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--itm-muted-2);
  text-align: left;
}

@media (max-width: 1100px) {
  :is(.itm-desc, .editor-styles-wrapper) :is(.itm-audience, .itm-banner-dark, .itm-text--2col .wp-block-columns, .itm-apps-section__intro) {
    flex-wrap: wrap !important;
  }

  :is(.itm-desc, .editor-styles-wrapper) :is(.itm-audience, .itm-banner-dark, .itm-text--2col .wp-block-columns, .itm-apps-section__intro) > .wp-block-column {
    flex-basis: 100% !important;
  }

  :is(.itm-desc, .editor-styles-wrapper) .itm-audience,
  :is(.itm-desc, .editor-styles-wrapper) .itm-text--2col .wp-block-columns,
  :is(.itm-desc, .editor-styles-wrapper) .itm-apps-section__intro {
    gap: 28px;
  }

  :is(.itm-desc, .editor-styles-wrapper) :is(.itm-apps > .wp-block-group__inner-container, .itm-apps:not(:has(> .wp-block-group__inner-container))) {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark--gallery .itm-banner-dark__media {
    padding: 0 40px 40px;
  }
}

@media (max-width: 760px) {
  .itm-desc--blocks > * + * {
    margin-top: 72px;
  }

  :is(.itm-desc, .editor-styles-wrapper) h2.itm-h2 {
    font-size: 32px;
  }

  :is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark h2.itm-h2 {
    font-size: 30px;
  }

  :is(.itm-desc, .editor-styles-wrapper) .itm-banner-dark__text {
    padding: 36px 28px;
  }

  :is(.itm-desc, .editor-styles-wrapper) :is(.itm-app-card > .wp-block-group__inner-container, .itm-app-card:not(:has(> .wp-block-group__inner-container))) {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
  }

  :is(.itm-desc, .editor-styles-wrapper) .itm-app-card {
    padding: 22px;
  }

  :is(.itm-desc, .editor-styles-wrapper) .itm-app-card__icon img {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  :is(.itm-desc, .editor-styles-wrapper) .itm-compare :is(th, td) {
    padding: 14px 18px;
    white-space: nowrap;
  }
}