/**
 * Reusable homepage section patterns.
 *
 * Ports the front-page sections so they can be inserted as Gutenberg
 * patterns on any page. Loaded on the front end and in the block editor
 * (see inc/editor.php).
 *
 * The section bands, layout and colour come from the same utility and
 * hook classes the homepage uses. These rules only neutralise the article
 * (.entry-content / .editor-styles-wrapper) rhythm so the section markup
 * renders exactly as designed inside page content.
 *
 * @package Algocept
 */

/* ——— Section shell ——— */

.entry-content .algocept-section,
.editor-styles-wrapper .algocept-section {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--algocept-copy);
}

/* Headings: reset the article rhythm (margin + type scale) */
.entry-content .algocept-section :is(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .algocept-section :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--algocept-ink);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.entry-content .algocept-section h1,
.editor-styles-wrapper .algocept-section h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.entry-content .algocept-section h2,
.editor-styles-wrapper .algocept-section h2 {
  font-size: 1.875rem;
  line-height: 1.15;
}

.entry-content .algocept-section h3,
.editor-styles-wrapper .algocept-section h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.entry-content .algocept-section h4,
.editor-styles-wrapper .algocept-section h4 {
  font-size: 1.125rem;
}

@media (min-width: 640px) {
  .entry-content .algocept-section h1,
  .editor-styles-wrapper .algocept-section h1 {
    font-size: 3rem;
  }

  .entry-content .algocept-section h2,
  .editor-styles-wrapper .algocept-section h2 {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .entry-content .algocept-section h1,
  .editor-styles-wrapper .algocept-section h1 {
    font-size: 3.75rem;
  }
}

/* Optional size modifiers */
.entry-content .algocept-section h2.algocept-title--xl,
.editor-styles-wrapper .algocept-section h2.algocept-title--xl {
  font-size: 1.875rem;
}

@media (min-width: 640px) {
  .entry-content .algocept-section h2.algocept-title--xl,
  .editor-styles-wrapper .algocept-section h2.algocept-title--xl {
    font-size: 3rem;
  }
}

.entry-content .algocept-section h3.algocept-title--2xl,
.editor-styles-wrapper .algocept-section h3.algocept-title--2xl {
  font-size: 1.5rem;
}

/* Paragraphs: remove article margins (patterns space with flex/grid gaps) */
.entry-content .algocept-section p,
.editor-styles-wrapper .algocept-section p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.entry-content .algocept-section p + p,
.editor-styles-wrapper .algocept-section p + p {
  margin-top: 0;
}

/* Lists: undo the article paper-card treatment (patterns use grouped cards) */
.entry-content .algocept-section ul,
.entry-content .algocept-section ol,
.editor-styles-wrapper .algocept-section ul,
.editor-styles-wrapper .algocept-section ol {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}

.entry-content .algocept-section ul > li,
.entry-content .algocept-section ol > li,
.editor-styles-wrapper .algocept-section ul > li,
.editor-styles-wrapper .algocept-section ol > li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* ——— Layout helpers ——— */

/* Wide content container inside a section (keeps 80rem in the editor) */
.editor-styles-wrapper .wp-block.algocept-container {
  max-width: 80rem;
}

/* Cards re-use the homepage motion vocabulary on the front end */
.algocept-section .home-card {
  height: 100%;
}

/* ——— Columns (about section): match the homepage "grid lg:grid-cols-2" ——— */

.entry-content .algocept-section .wp-block-columns.grid,
.editor-styles-wrapper .algocept-section .wp-block-columns.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .entry-content .algocept-section .wp-block-columns.grid,
  .editor-styles-wrapper .algocept-section .wp-block-columns.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.entry-content .algocept-section .wp-block-column,
.editor-styles-wrapper .algocept-section .wp-block-column {
  min-width: 0;
}

/* ——— Case-study query grid (responsive two-up) ——— */

.entry-content .algocept-section .wp-block-post-template.is-layout-grid,
.editor-styles-wrapper .algocept-section .wp-block-post-template.is-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .entry-content .algocept-section .wp-block-post-template.is-layout-grid,
  .editor-styles-wrapper .algocept-section .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.entry-content .algocept-section .wp-block-post-template > li,
.editor-styles-wrapper .algocept-section .wp-block-post-template > li {
  margin: 0;
}

/* Case-study titles read in ink (homepage h2 > a) */
.entry-content .algocept-section .wp-block-post-title a,
.editor-styles-wrapper .algocept-section .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}

.entry-content .algocept-section .wp-block-post-title a:hover,
.editor-styles-wrapper .algocept-section .wp-block-post-title a:hover {
  color: var(--algocept-blue);
}

/* ——— About card checklist (recreate the homepage check bullets) ——— */

.entry-content .algocept-section .home-card--about .wp-block-list,
.editor-styles-wrapper .algocept-section .home-card--about .wp-block-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.entry-content .algocept-section .home-card--about .wp-block-list > li,
.editor-styles-wrapper .algocept-section .home-card--about .wp-block-list > li {
  display: flex;
  gap: 0.75rem;
  padding: 0;
  background: none;
  color: var(--algocept-copy);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.entry-content .algocept-section .home-card--about .wp-block-list > li::before,
.editor-styles-wrapper .algocept-section .home-card--about .wp-block-list > li::before {
  content: "";
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-top: 0.25rem;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2300A0E0'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
}