/**
 * "In the News" archive.
 *
 * Everything is scoped under .itn-archive so it cannot leak into the rest of
 * the theme. Swap --itn-accent for the brand value if it differs.
 */

.itn-archive {
	--itn-accent: #8a2b12;
	--itn-ink: #111111;
	--itn-muted: #333333;
	--itn-arrow: #68260e;
	--itn-radius: 12px;

	/* Container — set these two to match the main navigation wrapper. */
	--itn-max-width: 1505px;
	--itn-gutter: clamp(20px, 5vw, 64px);
}

.itn-archive .itn-hero__inner,
.itn-archive .itn-grid__inner,
.itn-archive .itn-loader__inner {
	max-width: var(--itn-max-width);
	margin-inline: auto;
	padding-inline: var(--itn-gutter);
}

/* Hero
   ------------------------------------------------------------------------ */

.itn-archive .itn-hero {
	padding-bottom: 40px;
}

.itn-archive .itn-hero__headline {
	margin: 0;
	color: var(--itn-ink);
	font-size: clamp(40px, 7vw, 76px);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.025em;
	font-family: "haffer-medium", sans-serif;
}

.itn-archive .itn-hero__paragraph {
	max-width: 62ch;
	margin-top: 20px;
	color: var(--itn-muted);
	font-size: clamp(16px, 1.2vw, 18px);
	line-height: 1.55;
}

.itn-archive .itn-hero__paragraph p:last-child {
	margin-bottom: 0;
}

/* Grid
   ------------------------------------------------------------------------ */

.itn-archive .itn-grid {
	padding-bottom: clamp(32px, 5vw, 56px);
}

.itn-archive .itn-grid__items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(20px, 2.5vw, 40px);
	row-gap: clamp(40px, 4vw, 64px);
}

@media (max-width: 1200px) {
	.itn-archive .itn-grid__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.itn-archive .itn-grid__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.itn-archive .itn-grid__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

.itn-archive .itn-grid__empty,
.itn-archive .itn-grid__status {
	margin: 0;
	color: var(--itn-muted);
	font-size: 16px;
}

.itn-archive .itn-grid__status:empty {
	display: none;
}

.itn-archive .itn-grid__status {
	margin-top: 32px;
}

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

.itn-archive .itn-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.itn-archive .itn-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--itn-radius);
	background-color: #f1f1f1;
}

.itn-archive .itn-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.itn-archive .itn-card__image--placeholder {
	aspect-ratio: 3 / 2;
}

@media (hover: hover) {
	.itn-archive .itn-card:hover .itn-card__image {
		transform: scale(1.03);
	}
}

.itn-archive .itn-card__title {
	margin: 20px 0 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.015em;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.itn-archive .itn-card__title a {
	color: var(--itn-ink);
	text-decoration: none;
	font-family: "haffer-medium", sans-serif;
    font-weight: 400;
}

/*.itn-archive .itn-card__title a:hover,
.itn-archive .itn-card__title a:focus-visible {
	text-decoration: underline;
}*/

.itn-archive .itn-card__excerpt {
	margin: 14px 0 0;
	color: var(--itn-muted);
	font-size: 20px;
	line-height: 1.5;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.itn-archive .itn-card__link {
	display: block;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 22px;
	color: var(--itn-accent);
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
	text-decoration-thickness: 2px;
	text-underline-offset: 0;
	cursor: pointer;
}

/*.itn-archive .itn-card__link:hover,
.itn-archive .itn-card__link:focus-visible {
	text-decoration-thickness: 3px;
}*/

/* The arrow inherits currentColor from the SVG's stroke, so colouring the
   <svg> tints the icon independently of the link text. */
.itn-archive .itn-card__link svg {
	flex: none;
	color: var(--itn-arrow);
}
.itn-archive .itn-card__link svg path{
	color: var(--itn-arrow);
}

/* Mobile type scale.
   767px is the assumed mobile breakpoint — change it here if the theme
   uses a different one. */
@media (max-width: 767px) {
	.itn-archive .itn-card__title {
		font-size: 24px;
	}

	.itn-archive .itn-card__excerpt {
		font-size: 16px;
	}
}

/* Load more
   ------------------------------------------------------------------------ */

.itn-archive .itn-loader {
	padding-bottom: clamp(48px, 7vw, 96px);
}

.itn-archive .itn-loader__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
}

.itn-archive .itn-loader__button[hidden] {
	display: none;
}

.itn-archive .itn-loader__button[aria-busy="true"] {
	cursor: progress;
	opacity: 0.6;
}

/* Fallback only — if the theme has no .theme-button styles on this template,
   the button still reads as a button rather than browser default chrome. */
.itn-archive .itn-loader__button:not([class*="theme-button--"]) {
	padding: 18px 24px;
	border: 1px solid currentColor;
	border-radius: 8px;
	background: transparent;
	color: var(--itn-ink);
	font: inherit;
	cursor: pointer;
}


@media (prefers-reduced-motion: reduce) {
	.itn-archive .itn-card__image {
		transition: none;
	}
}

/* ==========================================================================
   Newsletter capture
   ==========================================================================

   Ported 1:1 from static/src/scss/partials/_newsletter-capture.scss and
   _newsletter-signup-form.scss, with the SCSS indirection resolved:

     @include laptop            -> @media (min-width: 1024px)
     @include tablet            -> @media (min-width: 720px)
     @include mobile-thru-tablet-> @media (max-width: 1023px)
     $color-black               -> #222
     $color-white               -> #fff
     $color-grey                -> #efefef
     $global-border-radius-normal -> 10px
     %h3                        -> haffer-medium 500, 24/30 -> 32/36 at 720px
     %paragraph                 -> haffer-regular 400, 16/25
     %paragraph-extra-large     -> 16/24 -> 24/30 at 1024px
     flex-gap-width(3, 48px)    -> calc(33.3333% - 32px)

   The container uses --itn-max-width / --itn-gutter rather than the theme's
   1440px/32px so the panel lines up with the hero and grid above it.

   Added on top of the original: the per-row icons and the vertical dividers,
   which the Newsletter_Capture partial has no support for.
   ========================================================================== */

.itn-archive .newsletter-capture {
	padding: 24px 0;
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-capture {
		padding: 0 0 64px 0;
	}
}

/* %grid-12 */
.itn-archive .newsletter-capture__grid,
.itn-archive .newsletter-capture__content-grid {
	position: relative;
	display: grid;
	margin: 0 auto;
	align-items: flex-start;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 32px;
}

.itn-archive .newsletter-capture__grid {
	max-width: var(--itn-max-width);
	padding-inline: var(--itn-gutter);
}

/* The inner grid deliberately has no gutter — it sits inside the panel. */
.itn-archive .newsletter-capture__content-grid {
	padding-inline: 0;
}

@media (max-width: 1023px) {
	.itn-archive .newsletter-capture__grid,
	.itn-archive .newsletter-capture__content-grid {
		column-gap: 16px;
		row-gap: 24px;
	}
}

/* %col-12 */
.itn-archive .newsletter-capture__content {
	grid-column: span 12;
	background-color: #222;
	border-radius: 10px;
	border-top-left-radius: 250px;
	border-top-right-radius: 250px;
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-capture__content {
		border-radius: 10px;
		border-top-left-radius: 250px;
		border-bottom-left-radius: 250px;
	}
}

/* %col-12, then %col-l-4 + %col-l-offset-1 */
.itn-archive .newsletter-capture__header {
	grid-column: span 12;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	padding: 90px 24px 0;
	gap: 24px;
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-capture__header {
		grid-column: 2 / span 4;
		align-items: flex-start;
		height: 100%;
		padding: 0 24px 0;
	}
}

/* %col-12, then %col-l-6 + %col-l-offset-5 */
.itn-archive .newsletter-capture__capture {
	grid-column: span 12;
	padding: 0 24px 36px;
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-capture__capture {
		grid-column: 6 / span 6;
		padding: 110px 0;
	}
}

/* %h3 + %no-spacing */
.itn-archive .newsletter-capture__headline {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: "haffer-medium", sans-serif;
	font-weight: 500;
	font-size: 24px;
	line-height: 30px;
}

@media (min-width: 720px) {
	.itn-archive .newsletter-capture__headline {
		font-size: 32px;
		line-height: 36px;
		letter-spacing: -0.32px;
	}
}

@media (max-width: 1023px) {
	.itn-archive .newsletter-capture__headline {
		font-size: 36px;
		font-weight: 500;
		line-height: 40px;
		text-align: center;
	}
}

/* %paragraph-extra-large + %no-spacing */
.itn-archive .newsletter-capture__subheadline {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: "haffer-regular", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-capture__subheadline {
		font-size: 24px;
		line-height: 30px;
	}
}

@media (max-width: 1023px) {
	.itn-archive .newsletter-capture__subheadline {
		font-size: 24px;
		font-weight: 500;
		line-height: 30px;
		text-align: center;
	}
}

.itn-archive .newsletter-capture__paragraphs {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
	--gap: 24px;
	--columns: 1;
	gap: var(--gap);
	margin: 36px 0 0;
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-capture__paragraphs {
		flex-direction: row;
		justify-content: space-between;
		/* stretch (not flex-start) so every divider matches the tallest column */
		align-items: stretch;
		--gap: 48px;
		--columns: 3;
	}
}

/* %paragraph + %no-spacing + flex-gap-width(var(--columns), var(--gap)) */
.itn-archive .newsletter-capture__paragraph {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
	color: #fff;
	font-family: "haffer-regular", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

@media (max-width: 1023px) {
	.itn-archive .newsletter-capture__paragraph {
		font-size: 16px;
		font-weight: 400;
		line-height: 18px;
	}
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-capture__paragraph {
		width: calc(33.3333% - 32px);
		align-items: flex-start;
		gap: 20px;
		text-align: left;
	}

	/* One divider in the gap before every column but the first.
	   --gap is 48px here, so -24px puts the line at its midpoint. */
	.itn-archive .newsletter-capture__paragraph + .newsletter-capture__paragraph::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -24px;
		width: 1px;
		background-color: rgba(255, 255, 255, 0.25);
	}
}

.itn-archive .newsletter-capture__icon {
	display: block;
	width: auto;
	height: 40px;
	flex: none;
}

.itn-archive .newsletter-capture__paragraph-text {
	display: block;
}

.itn-archive .newsletter-capture__form .frm_error_style,
.itn-archive .newsletter-capture__form .frm_message {
	color: #fff;
	font-family: "haffer-regular", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
}

@media (max-width: 1023px) {
	.itn-archive .newsletter-capture__form .frm_error_style,
	.itn-archive .newsletter-capture__form .frm_message {
		text-align: center;
	}
}

/* Signup form (Marketo)
   ------------------------------------------------------------------------ */

.itn-archive .newsletter-signup-form fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

.itn-archive .newsletter-signup-form .mktoForm {
	border: 2px solid #fff;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	border-radius: 10px;
}

@media (min-width: 1024px) {
	.itn-archive .newsletter-signup-form .mktoForm {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.itn-archive .newsletter-signup-form .mktoForm .mktoButton {
	background-color: #222;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	height: 48px !important;
	padding: 0 44px !important;
	border-radius: 10px;
	width: 100% !important;
}

.itn-archive .newsletter-signup-form .mktoForm .mktoButton,
.itn-archive .newsletter-signup-form .mktoForm .mktoButton * {
	cursor: pointer;
}

.itn-archive .newsletter-signup-form .mktoForm .mktoButton span {
	color: #fff;
	font-family: "haffer-regular", sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 18px;
	display: flex;
}

.itn-archive .newsletter-signup-form .mktoForm .mktoFieldWrap {
	margin: 0 !important;
}

.itn-archive .newsletter-signup-form .mktoForm .mktoFieldWrap:focus {
	box-shadow: none;
}

/* The paper-plane icon is inlined as a data URI so this file can live at any
   path without breaking the relative ../images/ lookup the SCSS used. */
.itn-archive .newsletter-signup-form .mktoForm .mktoFieldWrap input {
	color: #222;
	font-family: "haffer-regular", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 25px;
	background-color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2217%22%20height=%2217%22%20viewBox=%220%200%2017%2017%22%20fill=%22none%22%3E%3Cpath%20opacity=%220.4%22%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.53099%208.65839C4.82954%208.76622%205.16262%208.73126%205.43071%208.56532L14.4062%203.0062L7.00321%209.85934C6.80366%2010.044%206.68993%2010.3%206.68891%2010.5674L6.66352%2016.5047C6.66149%2017.038%207.41245%2017.194%207.63535%2016.7066L9.61201%2012.3833C9.73336%2012.1184%2010.0629%2012.0116%2010.3239%2012.1529L15.5659%2014.9866C15.8949%2015.1649%2016.3026%2014.9448%2016.3199%2014.5799L16.9997%200.515665C17.017%200.15671%2016.6443%20-0.0988426%2016.3011%200.0370582L0.474594%206.28652C0.0455478%206.45591%200.055195%207.04777%200.489319%207.20386L4.53099%208.65839Z%22%20fill=%22%238F9EA9%22/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: top 51% left 20px;
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 48px;
	width: 100%;
	padding: 0 20px 0 48px !important;
	box-shadow: none;
	border: none;
}

@media (max-width: 1023px) {
	.itn-archive .newsletter-signup-form .mktoForm .mktoFieldWrap input {
		background-position: top 51% left 12px;
	}
}

.itn-archive .newsletter-signup-form .mktoForm .mktoFormCol {
	margin: 0 !important;
}

.itn-archive .newsletter-signup-form .mktoForm .mktoFormRow:nth-child(2) {
	flex: 1;
}

@media (max-width: 719px) {
	.itn-archive .newsletter-signup-form .mktoForm .mktoFormRow:nth-child(2) {
		flex-basis: 64px;
	}
}

.itn-archive .newsletter-signup-form .mktoForm .mktoOffset {
	display: none;
}

.itn-archive .newsletter-signup-form .mktoForm label {
	position: absolute;
	top: -9999px;
	left: -9999px;
	opacity: 0;
}