/* ==========================================================================
   The difference between a page this plugin drew and the same page built out
   of WordPress blocks. Nothing else belongs in here.

   Loads only on the AMLA full width template. Every rule is here because core
   wraps a block in markup of its own, and the wrapper landed somewhere the
   design did not expect. A rule that is not about a wp-block- class is a rule
   that belongs in site.css instead.
   ========================================================================== */

/* There is deliberately NO blanket reset of the gap between a group's children
   here, and that is worth a sentence because the obvious rule is wrong.

   The obvious rule is `.wp-block-group.is-layout-flow > * + * { margin-block-start: 0 }`,
   to stop the theme adding a gap AMLA did not ask for. It was here, and it took
   the gaps AMLA DID ask for with it: three class names beat two, so it also beat
   .hero__sub's top margin and the space between the two Who-we-are paragraphs,
   and the page came out with its paragraphs stuck together. The theme's gap
   comes from the global stylesheet, which inc/page.php drops on this template,
   so there is nothing left to reset and resetting it costs real spacing. */

/* A group that is a section is the section. Core's own class carries nothing
   we want, and nothing we have to remove either, so this only guards against a
   theme that put padding on it. */
.amla section.wp-block-group { padding-inline: 0; }

/* the.content() puts each top level block in the flow directly. Blocks that
   carry a .wrap already have their own width; ones that do not would run to
   the edge of the window, so a bare paragraph or heading gets the same gutter
   the rest of the page has. */
.amla > .wp-block-heading,
.amla > p:not([class]) { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

/* A heading block carries wp-block-heading alongside its AMLA class. Core sets
   nothing on it, but a theme can, so the AMLA scale is restated as the winner
   on the three that appear on the home page. */
.amla .wp-block-heading.display { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800;
	letter-spacing: -.025em; line-height: 1.04; }
.amla .wp-block-heading.h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.02em; }
.amla .wp-block-heading.h2 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }

/* An image dropped into a section by hand. Core centres it in a figure with a
   margin; inside an AMLA card that reads as a mistake. */
.amla .wp-block-image { margin: 0; }
.amla .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--amla-r-card); }

/* The editor writes an empty paragraph the moment somebody presses return at
   the end of a section, and an empty paragraph in a navy panel is a visible
   band of navy. */
.amla p:empty { display: none; }

/* ==========================================================================
   The styles that were inline attributes on the drawn page.

   On the drawn page these sat in style="" next to the markup, which is the
   right place when one function writes both. In a block they cannot: a
   paragraph block saves the markup its attributes describe and WordPress
   compares the two when the editor opens the page, so a style attribute that
   its attributes do not account for gets the block marked as broken content.
   Same pixels, named instead of inline.
   ========================================================================== */

.amla .amla-hero__eyebrow { margin-bottom: 20px; }

.amla .amla-who { align-items: center; gap: 48px; }
.amla .amla-who__h { margin: 14px 0 18px; }
.amla .amla-who__p2 { margin-top: 16px; }

.amla .amla-mid { text-align: center; }
.amla .amla-comm__h { margin: 14px auto 18px; max-width: 20ch; }
.amla .amla-comm__p { margin: 0 auto 44px; text-align: center; }
.amla .amla-prt__h { margin: 14px auto 12px; max-width: 34ch; }
.amla .amla-prt__p { max-width: 62ch; margin: 0 auto 36px; }
.amla .amla-cta__h { color: #fff; max-width: 22ch; margin: 0 auto; }
.amla .amla-cta__p { margin: 20px auto 0; text-align: center; }