/* Shared detail and recommendation layout; typography and brand colors stay inherited. */
:where(#main-content, .lc-main) {
  --detail-gap: 24px;
  --detail-space: 56px;
  --detail-card-bg: #f7f9fb;
  --detail-line: #dbe5ec;
}

.lc-main .lc-section,
#main-content .lv-section { padding-block: var(--detail-space); }
.lc-main .lc-section-heading { margin-bottom: 28px; }
.lc-main .lc-section-heading h2 { text-wrap: balance; }
.lc-main .lc-section-heading > h2 + p { margin-top: 20px; }
.lc-main .lc-intro-grid h2 + p { margin-top: 20px; }
.lc-main .lecen-validation { margin-top: var(--detail-space); }
.lc-main .lecen-validation > h2 { margin-bottom: 24px; }

:is(.lc-main, #main-content) .lecen-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--detail-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: stretch;
}
:is(.lc-main, #main-content) .lecen-info-grid > :is(article, li) {
  min-width: 0;
  padding: 24px;
  background: var(--detail-card-bg);
  border: 1px solid var(--detail-line);
  border-radius: 8px;
  grid-column: auto;
}
:is(.lc-main, #main-content) .lecen-info-grid h3 {
  font-size: 1.1875rem;
  line-height: 1.5;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
:is(.lc-main, #main-content) .lecen-info-grid p {
  font-size: 1rem;
  line-height: 1.85;
  margin: 0;
  max-width: none;
  overflow-wrap: anywhere;
}
/* Match the shared card rule's specificity so dark-band cards cannot turn white. */
:is(.lc-main, #main-content) .lc-section-ink .lecen-info-grid > article {
  background: #102e40;
  border-color: #355164;
  color: #c5d7e5;
}
:is(.lc-main, #main-content) .lc-section-ink .lecen-info-grid h3 { color: #edf7fe; }
:is(.lc-main, #main-content) .lc-section-ink .lecen-info-grid p { color: #c5d7e5; }
.lc-main :is(.lc-feature, .lc-setup-list article, .lc-step-grid li) h3 + p { margin-top: 16px; }
.lc-main .lc-role-grid { margin-top: 24px; }
.lc-main .lc-setup-grid { gap: 32px; }
.lc-main .lc-setup-media { border-radius: 8px; padding: 0; }
.lc-main .lc-setup-media > img { width: 100%; height: auto; object-fit: contain; }

:is(.lc-main, #main-content) .lecen-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
:is(.lc-main, #main-content) .lecen-card-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.lc-main, #main-content) .lecen-card-grid:has(> :only-child) { grid-template-columns: minmax(0, 580px); justify-content: center; }
:is(.lc-main, #main-content) .lecen-card-grid > :is(article, a) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: #fff;
  border: 1px solid var(--detail-line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  transform: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
:is(.lc-main, #main-content) .lecen-card-grid > :is(article, a):hover {
  transform: none;
  border-color: #96b9cc;
  box-shadow: 0 3px 12px #153b5010;
}
.lc-main .lecen-card-grid .lc-card > a,
#main-content .lecen-card-grid .tc-card-link { display: flex; flex-direction: column; flex: 1; width: 100%; }
:is(.lc-main, #main-content) .lecen-card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #edf2f5;
}
:is(.lc-main, #main-content) .lecen-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
}
:is(.lc-main, #main-content) .lecen-card-media--cover img { object-fit: cover; }
:is(.lc-main, #main-content) .lecen-card-empty { padding: 24px; color: #365367; font-size: 1.125rem; text-align: center; }
:is(.lc-main, #main-content) .lecen-card-grid :is(.lc-card-copy, .lv-card-text, .tc-card-copy) {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px;
  min-width: 0;
}
:is(.lc-main, #main-content) .lecen-card-grid :is(h2, h3) {
  font-size: 1.25rem !important;
  line-height: 1.5;
  min-height: 3em;
  margin: 0 0 16px;
  overflow-wrap: anywhere;
}
:is(.lc-main, #main-content) .lecen-card-grid p:not(.lc-kicker):not(.lv-kicker):not(.lecen-card-caption) {
  display: block;
  margin: 0 0 20px;
  font-size: 1rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
:is(.lc-main, #main-content) .lecen-card-grid .lecen-card-caption {
  display: block;
  font-size: .75rem;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #52677b;
}
:is(.lc-main, #main-content) .lecen-card-grid :is(.lc-card-link, .lv-card-text > .lv-link, .tc-card-more, .learn-more) {
  margin-top: auto;
  padding-top: 12px;
  font-size: .875rem;
  line-height: 1.6;
}

/* Article sidebars are supporting navigation, not hero headings. */
#main-content .lv-article-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, 288px); gap: 48px; align-items: start; }
#main-content .lv-prose { max-width: 860px; font-size: 1rem; line-height: 1.85; }
#main-content .lv-prose :is(p, ul, ol, figure, blockquote) { margin-block: 0 24px; }
#main-content .lv-prose h2 { margin: 48px 0 20px; font-size: 1.75rem; line-height: 1.4; }
#main-content .lv-prose h3 { margin: 32px 0 16px; font-size: 1.25rem; }
#main-content .lv-prose > div > :first-child { margin-top: 0; }
#main-content .lv-prose img { width: auto; max-width: 100%; height: auto; object-fit: contain; border-radius: 8px; }
#main-content .lv-article-aside { display: grid; gap: 24px; position: sticky; top: 104px; }
#main-content .lv-article-aside :is(.contents-nav, .lv-contact-note) {
  width: 100%;
  padding: 24px;
  margin: 0;
  border: 1px solid var(--detail-line);
  border-radius: 8px;
  background: var(--detail-card-bg);
  box-shadow: none;
}
#main-content .lv-article-aside :is(h2, strong) { display: block; font-size: 1.125rem; line-height: 1.5; margin: 0 0 16px; }
#main-content .lv-article-aside p { font-size: .9375rem; margin-bottom: 20px; }
#main-content .contents-nav ol { padding-left: 22px; margin: 0; }
#main-content .contents-nav li { margin: 0 0 10px; }
#main-content .contents-nav a { display: block; white-space: normal; overflow-wrap: anywhere; line-height: 1.7; }
#main-content .lv-about-story { max-width: 100%; columns: 2; column-gap: 48px; }
#main-content .lv-about-story > :is(h2,h3) { break-after: avoid; }
#main-content .lv-about-story > :is(p,ul,ol) { break-inside: avoid; }
#main-content .lv-steps { display: grid; gap: 24px; }
#main-content .lv-steps li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 0 16px; padding: 0 0 24px; margin: 0; }
#main-content .lv-steps li::before { position: static; grid-row: span 2; }
#main-content .lv-steps li h3 { margin: 0 0 16px; }
#main-content .lv-contact-grid { display: block; }
#main-content .lv-contact-info { width: 100%; }
#main-content .lv-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 28px 0; }
#main-content .lv-methods > a { padding: 24px; margin: 0; border-radius: 8px; }
#main-content .lv-methods .contact-existing { grid-column: 1 / -1; max-width: 850px; }
#main-content .lv-contact-info > .lv-contact-note { max-width: 850px; padding: 24px; border-radius: 8px; }
#main-content .contact-grid { grid-template-columns: minmax(0,1fr); }
#main-content .contact-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }

@media (max-width: 1000px) {
  :is(.lc-main, #main-content) :is(.lecen-info-grid, .lecen-card-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #main-content .lv-article-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
  #main-content .lv-article-aside { position: static; order: 0; grid-template-columns: repeat(2,minmax(0,1fr)); }
  #main-content .lv-methods { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  :where(#main-content, .lc-main) { --detail-space: 48px; --detail-gap: 20px; }
  :is(.lc-main, #main-content) :is(.lecen-info-grid, .lecen-card-grid),
  :is(.lc-main, #main-content) .lecen-card-grid:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0,1fr); gap: 20px; }
  :is(.lc-main, #main-content) .lecen-info-grid > :is(article,li) { padding: 20px; }
  :is(.lc-main, #main-content) .lecen-card-grid :is(.lc-card-copy,.lv-card-text,.tc-card-copy) { padding: 20px; }
  :is(.lc-main, #main-content) .lecen-card-grid :is(h2,h3) { min-height: 0; }
  #main-content :is(.lv-article-aside,.lv-methods,.contact-methods) { grid-template-columns: minmax(0,1fr); }
  #main-content .lv-about-story { columns: auto; }
  #main-content .lv-prose h2 { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.lc-main, #main-content) .lecen-card-grid > :is(article,a) { transition: none; }
}