/*
 * Downloads — the document card, the "Downloads for …" section and the gate dialog. Handle "tfp-document-card",
 * after tfp-industry for the --ind-* tokens. Used by the library, the landing page, the Resources hub and every
 * template with a Downloads block. Theme rules: 1px borders instead of elevation, 4px radius, no shadows or
 * gradients, yellow only as a surface for the one primary action, never as text on light.
 */

.dc, .dl-list, .dg, .ds, .rh-docs, .dc__dl {
	--dc-ink: var(--ind-ink, #0D3556);
	--dc-blue: var(--ind-blue, #005B97);
	--dc-yellow: var(--ind-yellow, #FAC410);
	--dc-text: var(--ind-text, #2B3440);
	--dc-muted: #5F6B78;
	--dc-n50: var(--ind-n50, #F3F4F6);
	--dc-n100: var(--ind-n100, #E7E9ED);
	--dc-n200: var(--ind-n200, #D3D8DE);
	--dc-radius: var(--ind-radius, 4px);
	--dc-fade: var(--ind-fade, color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out);
}
.dc-ico { display: block; flex: 0 0 auto; width: 18px; height: 18px; }
.dc .show-for-sr, .dg .show-for-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Card --------------------------------------------------------------- */

.dc { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--dc-n200); border-radius: var(--dc-radius); background: #fff; color: var(--dc-text); transition: var(--dc-fade); }
.dc:hover, .dc:focus-within { border-color: var(--dc-blue); }
.dc__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--dc-n200); border-radius: var(--dc-radius) var(--dc-radius) 0 0; background: var(--dc-n50); }
/* The cover sits on the panel like a document on a desk: contained, never cropped. */
.dc__img { position: absolute; inset: 8% 10%; width: 80%; height: 84%; max-width: none; object-fit: contain; object-position: center; }
.dc__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dc-muted); }
.dc__noimg .dc-ico { width: 40px; height: 40px; }
.dc__body { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; flex: 1 1 auto; padding: 20px; }
.dc .dc__type { margin: 0; padding: 3px 8px; border: 1px solid var(--dc-n200); border-radius: var(--dc-radius); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-blue); background: #fff; }
.dc .dc__title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.005em; }
.dc .dc__link { color: var(--dc-ink) !important; text-decoration: none !important; }
.dc .dc__link:hover { text-decoration: underline !important; }
.dc .dc__summary { margin: 0; font-size: 16px; line-height: 25px; color: var(--dc-text); }
.dc .dc__snippet { margin: 0; font-size: 14px; line-height: 21px; color: var(--dc-muted); }
.dc__snippet mark { background: var(--dc-n50); color: var(--dc-ink); padding: 0 2px; font-style: italic; }
.dc .dc__meta { margin: 0; font-size: 12px; line-height: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-muted); }
.dc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: .5rem; width: 100%; }
.dc .dc__view { font-weight: 700; font-size: 15px; }
.dc__dl {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem;
	border: 1px solid var(--dc-ink); border-radius: var(--dc-radius); background: #fff; color: var(--dc-ink) !important;
	font-weight: 700; font-size: 15px; text-decoration: none !important; transition: var(--dc-fade); cursor: pointer;
}
.dc__dl:hover, .dc__dl:focus-visible { background: var(--dc-ink); color: #fff !important; }
.dc__lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--dc-muted); }
.dc__lock .dc-ico { width: 15px; height: 15px; }
.dc :focus-visible { outline: 2px solid var(--dc-blue); outline-offset: 2px; }

/* ---- Grid + "Downloads for …" section ----------------------------------- */

.dl-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px)  { .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .dl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* One document: the card lies on its side — cover left, text right — instead of a lonely third of a row. */
@media (min-width: 768px) {
	.dl-grid--one { grid-template-columns: minmax(0, 860px); }
	.dl-grid--one .dc { flex-direction: row; }
	.dl-grid--one .dc__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--dc-n200); border-radius: var(--dc-radius) 0 0 var(--dc-radius); }
	.dl-grid--one .dc__body { padding: 28px; }
}

.dl-list { padding: clamp(2.75rem, 5vw, 5rem) 0; background: var(--dc-n50); border-top: 1px solid var(--dc-n100); }
.dl-list__wrap { width: 100%; max-width: 1312px; margin: 0 auto; padding-left: clamp(1rem, 3.5vw, 4rem); padding-right: clamp(1rem, 3.5vw, 4rem); }
.dl-list__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.dl-list .dl-list__eyebrow { margin: 0 0 .5rem; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-blue); }
.dl-list .dl-list__title { margin: 0; color: var(--dc-ink); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.18; letter-spacing: -.01em; }
.dl-list__all { margin: 0; font-weight: 700; }

/* ---- Gate dialog -------------------------------------------------------- */

.dg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--dc-n200); border-radius: var(--dc-radius); background: #fff; color: var(--dc-text); overflow: auto; }
.dg::backdrop { background: rgba(7, 22, 38, .6); }
/* Opened without scripts (?gate=1): an in-page panel, not a modal. */
.dg[open]:not(:modal) { position: relative; z-index: 60; display: block; margin: 24px auto; }
.dg__form { margin: 0; padding: 20px 24px 24px; }
.dg__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: .25rem; }
.dg .dg__eyebrow { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--dc-blue); }
.dg__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -8px -12px 0 0; padding: 0; border: 0; border-radius: var(--dc-radius); background: none; color: var(--dc-ink); cursor: pointer; }
.dg__close:hover { background: var(--dc-n50); }
.dg .dg__title { margin: 0 0 .75rem; color: var(--dc-ink); font-size: clamp(22px, 2.2vw, 26px); line-height: 1.22; }
.dg .dg__lead { margin: 0 0 1.25rem; font-size: 16px; line-height: 25px; }
.dg__grid { display: grid; grid-template-columns: 1fr; gap: 14px 16px; }
@media (min-width: 520px) { .dg__grid { grid-template-columns: 1fr 1fr; } .dg__field:not(.dg__field--lead), .dg__field--wide { grid-column: 1 / -1; } }
.dg__field { margin: 0; }
.dg__field[hidden] { display: none; }
.dg__field label { display: block; margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--dc-ink); }
.dg .dg__field input { width: 100%; height: 48px; margin: 0; padding: 0 12px; border: 1px solid var(--dc-n200); border-radius: var(--dc-radius); background: #fff; box-shadow: none; font-size: 16px; color: var(--dc-text); }
.dg .dg__field input:focus { border-color: var(--dc-ink); outline: 2px solid var(--dc-blue); outline-offset: 1px; box-shadow: none; }
.dg .dg__field input[aria-invalid="true"] { border-color: #B3261E; }
.dg__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dg .dg__err { margin: 14px 0 0; padding: 10px 12px; border: 1px solid #B3261E; border-radius: var(--dc-radius); color: #B3261E; font-size: 15px; line-height: 22px; background: #fff; }
.dg .dg__actions { margin: 18px 0 0; }
.dg .dg__submit.button { width: 100%; margin: 0; justify-content: center; text-align: center; }
.dg .dg__submit[aria-busy="true"] { opacity: .7; pointer-events: none; }
.dg .dg__small { margin: 14px 0 0; font-size: 13px; line-height: 19px; color: var(--dc-muted); }
.dg .dg__small a { color: var(--dc-blue); }
.dg__done { outline: 0; }
.dg__done p { margin: 0 0 .75rem; font-size: 16px; line-height: 25px; }
.dg .dg__ok { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--dc-ink); }
.dg__ok .dc-ico { width: 22px; height: 22px; color: #1E7A4C; }
.dg__done a { color: var(--dc-blue); font-weight: 700; }
.dg .dg__next { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--dc-n100); }
.dg :focus-visible { outline: 2px solid var(--dc-blue); outline-offset: 2px; }

/* Under the solution page's lead form. The form section is navy, so the link is white with a yellow underline. */
.dl-cta-alt { margin: 1.25rem 0 0; font-size: 16px; line-height: 24px; }
.dl-cta-alt a { font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--ind-yellow, #FAC410); text-underline-offset: 3px; }
.dl-cta-alt__meta { opacity: .8; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .dc, .dc__dl { transition: none; } }