/* The Learn hub and guides (stage 3 spec 7.2), on top of site-prose.css. */

/* A guide's top: the heading and lede, with the three points beside them from 960px. */
.learn-top__grid { display: grid; gap: var(--space-6); align-items: start; }
.learn-head { margin-block-end: 0; }
.learn-head .eyebrow a { color: inherit; }
.learn-head .learn-time, .learn-time { font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
.learn-short h2 { font-size: var(--text-lg); margin-block: 0 var(--space-3); }
.learn-short ul { display: grid; gap: var(--space-3); margin: 0; padding-inline-start: var(--space-5); }
@media (min-width: 960px) {
  .learn-top__grid { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-8); }
}

/* The body at a reading measure, and the other guides beside it from 960px. */
.learn { display: grid; gap: var(--space-7); align-items: start; }
.learn-main { min-inline-size: 0; }
.learn-body > :first-child { margin-block-start: 0; }
.learn-body h2 { font-size: var(--text-xl); line-height: var(--leading-title); }
.learn-body ol:not(.list-plain) { padding-inline-start: var(--space-5); }
.learn-body :is(ul, ol):not(.list-plain) > li + li { margin-block-start: var(--space-2); }
.learn-body code { overflow-wrap: anywhere; }
.learn-body .table-scroll { margin-block: var(--space-4) var(--space-5); }
.learn-body .ladder { align-items: stretch; }
@media (min-width: 1000px) { .learn-body .ladder { grid-template-columns: 1fr 1fr; } }
.learn-body .ladder h3 { margin-block-start: var(--space-4); }
.learn-body .table :is(th, td) { padding-inline: var(--space-2); }
.learn-body td code { overflow-wrap: normal; }
.learn-body pre.code { margin-block: var(--space-3) var(--space-4); }
.learn-more { padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.learn-more h2 { margin-block: 0 var(--space-3); }
.learn-more ul { display: grid; gap: var(--space-3); }
.learn-more a { color: var(--ink-2); font-weight: 500; }
.learn-more a:hover { color: var(--ink); }
@media (min-width: 960px) {
  .learn { grid-template-columns: minmax(0, 46rem) 15rem; justify-content: space-between; gap: var(--space-8); }
  .learn-more { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); }
}

/* A term and what it means: a DMARC tag or a policy, side by side once there is room. */
.learn-terms { display: grid; gap: var(--space-4); margin-block: var(--space-4) var(--space-5); margin-inline: 0; max-inline-size: var(--measure); }
.learn-terms > div { display: grid; gap: var(--space-1); }
.learn-terms dt code { font-weight: 600; }
.learn-terms dd { margin: 0; }
@media (min-width: 640px) { .learn-terms > div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--space-4); } }

/* The provider's own pages, under the rules they state. */
.learn-body .learn-cite { display: grid; gap: var(--space-1); margin-block-end: var(--space-4); padding: 0; font-size: var(--text-sm); }

/* How the product helps, and the sources with the date they were checked. */
.learn-help { display: grid; gap: var(--space-3); justify-items: start; margin-block-start: var(--space-7); max-inline-size: var(--measure); }
.learn-help > * { margin: 0; }
.learn-action { gap: var(--space-4); }
.learn-sources { margin-block-start: var(--space-7); max-inline-size: var(--measure); font-size: var(--text-sm); }
.learn-sources h2 { margin-block: 0 var(--space-3); }
.learn-sources ul { display: grid; gap: var(--space-2); margin-block-end: var(--space-3); }

/* The diagram in "SPF, DKIM and DMARC together": a letter half out of the brand's envelope,
   its parts keyed to the labels beside it. The keys repeat each part's colour and shape. */
.addresses { display: grid; gap: var(--space-5); margin-block: var(--space-5) var(--space-6); margin-inline: 0; padding: var(--space-5); border-radius: var(--radius-card); background: var(--paper-2); }
.addresses__art { inline-size: 100%; max-inline-size: 18rem; block-size: auto; justify-self: center; }
.addresses__keys { display: grid; gap: var(--space-4); margin: 0; }
.addresses__keys dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 700; }
.addresses__keys dd { margin: 0; }
.addresses__keys code { font-size: var(--text-xs); overflow-wrap: anywhere; }
.addresses .tag { background: var(--card); color: var(--blue); }
.addresses figcaption { font-size: var(--text-sm); }
@media (min-width: 700px) {
  .addresses { grid-template-columns: 12rem minmax(0, 1fr); align-items: center; }
  .addresses figcaption { grid-column: 1 / -1; }
}
.addresses__key { flex: none; inline-size: 1.5rem; block-size: 0.6rem; border-radius: var(--radius-pill); }
.addresses__key--from { background: var(--seal); }
.addresses__key--sender { background: var(--ink-2); }
.addresses__key--seal { inline-size: 0.9rem; block-size: 0.9rem; background: var(--blue); }
.dg-paper { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.dg-from { fill: var(--seal); }
.dg-line { fill: var(--env-2); }
.dg-env { fill: var(--env-1); stroke: var(--env-3); stroke-width: 2; }
.dg-flap { fill: none; stroke: var(--card); stroke-width: 5; stroke-linecap: round; }
.dg-sender { fill: var(--ink-2); }
.dg-seal { fill: var(--blue); }
.dg-seal__ring { fill: none; stroke: var(--on-blue-2); stroke-width: 2; }

/* The hub: a card per guide, its envelope picture beside its words once there is room. */
.learn-cards { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .learn-cards { grid-template-columns: 1fr 1fr; } }
a.learn-card { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4); align-content: start; block-size: 100%; }
@media (min-width: 480px) { a.learn-card { grid-template-columns: 7rem minmax(0, 1fr); } }
.learn-card__text { display: grid; gap: var(--space-2); }
.learn-card__text > * { margin: 0; }
.learn-card__text p { color: var(--ink-2); }
.learn-art { inline-size: 100%; block-size: auto; }
.learn-art__1 { fill: var(--env-1); }
.learn-art__2 { fill: var(--env-2); }
.learn-art__3 { fill: var(--env-3); }
.learn-art__4 { fill: var(--blue); }
.learn-art__flap { fill: none; stroke: var(--on-blue); stroke-width: 4; stroke-linecap: round; }
.learn-art__flap--thin { stroke-width: 2.5; }
.learn-art__fold { fill: none; stroke: var(--card); stroke-width: 2.5; stroke-linecap: round; }
.learn-art__seal { fill: var(--seal); }
.learn-art__sheet { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.learn-next { display: grid; gap: var(--space-3); justify-items: start; }
.learn-next > * { margin: 0; }