/* =========================================================
   Newsletter page + card (Elementor Loop Item: [ca_newsletter_card])
   Reference layout: portrait cover, hover reveals a frosted panel with the
   issue title and view/download circular buttons - translated here to the
   theme's own navy/gold language (the reference site uses a white frosted
   panel on a light-blue brand; this theme uses a dark navy one, matching
   .service-card-overlay / .feature-card-overlay elsewhere in the site).
   ========================================================= */

/* ---------------- Language tabs ---------------- */
.nl-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--color-border); margin-bottom: 30px; }
.nl-tab {
	background: none; border: none; border-bottom: 3px solid transparent;
	padding: 0 0 14px; font-weight: 600; font-size: 1rem; color: var(--color-muted);
	transition: color .2s ease, border-color .2s ease;
}
.nl-tab:hover:not(:disabled) { color: var(--color-navy); }
.nl-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.nl-tab:disabled { opacity: .4; cursor: default; }
.nl-tab[hidden] { display: none; }

/* ---------------- Card ---------------- */
.nl-card {
	position: relative;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .25s ease;
}
.nl-card:hover { box-shadow: 0 20px 40px rgba(20, 30, 40, .14); }

.nl-card-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--color-bg-soft); }
.nl-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* At rest, a card shows only its cover - no caption bar. The frosted
   detail panel (eyebrow, title, view/download buttons) is hover/focus-only,
   positioned relative to .nl-card (there is no padding around the media,
   so this covers exactly the image area). Only the rest state is declared
   here (opacity/transform below) - the image's zoom and this panel's
   fade/slide are driven entirely from assets/js/newsletter.js, not a CSS
   :hover rule or transition. Two reasons: Chrome on this machine (and any
   visitor with the OS "reduce motion" preference on, which Windows exposes
   as one combined animation/performance toggle rather than a dedicated
   accessibility setting the way macOS does) skips CSS transitions outright
   rather than easing them; and a CSS :hover rule changes a property
   instantly, with no transition, the moment the mouse enters - a heavier-
   specificity inline style from JS arriving a frame later can't "catch" a
   smooth animation from that jump, it just inherits the already-finished
   value. Keeping the property out of CSS entirely, with JS as the only
   thing that ever sets it, avoids that race rather than trying to win it. */
.nl-card-overlay {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
	padding: 20px;
	background: linear-gradient(180deg, rgba(27, 43, 58, 0) 30%, rgba(27, 43, 58, .82) 65%, rgba(27, 43, 58, .96) 100%);
	opacity: 0; transform: translateY(10px); pointer-events: none;
}

.nl-card-eyebrow {
	margin: 0 0 4px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
	color: var(--color-accent-light);
}
.nl-card-title { margin: 0; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.35; }

.nl-card-actions { display: flex; justify-content: flex-end; gap: 10px; }
.nl-icon-btn {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
	background: var(--color-accent); color: #fff; font-size: .85rem;
	box-shadow: 0 6px 16px rgba(200, 149, 43, .4);
	transition: background .2s ease, transform .2s ease;
}
.nl-icon-btn:hover { background: var(--color-navy); transform: translateY(-2px); }

/* ---------------- Loop Grid wrapper (set on the Newsletter page) ---------------- */
.nl-grid-section { padding: 10px 20px 70px; }
.nl-grid-section .elementor-loop-container.elementor-grid { gap: 26px; }

/* Each .e-loop-item (the grid cell Elementor wraps every card in) collapses
   to height:2px on this install regardless of its actual content, which
   lays out at its real height anyway (overflow is visible, not clipped) and
   spills out over the following rows - what reads as the cards overlapping.
   Traced to the item's own flex container (.e-con, display:flex, row
   direction): its single child - the widget holding [ca_newsletter_card] -
   is a flex item, and something in this install's nested flex/grid
   plugin CSS makes it stretch to a near-zero cross-size instead of sizing
   to its content's real height (confirmed independent of grid-template-rows
   and of align-items/self overrides). There is only ever one child here, so
   flex layout buys nothing - switching the item and its .e-con to plain
   block display sidesteps the stretch calculation entirely and lets normal
   block-in-block auto-sizing (which always expands to fit its content) apply. */
.nl-grid-section .e-loop-item,
.nl-grid-section .e-loop-item > .e-con {
	display: block !important;
	height: auto !important;
}

/* Works around a mismatch in this install's pro-elements plugin: the
   PHP (v4.2.3) renders each column count as its own class, e.g.
   "elementor-grid-3"/"elementor-grid-tablet-2"/"elementor-grid-mobile-1"
   on the Loop Grid widget, but the plugin's own compiled CSS
   (widget-loop-grid.min.css) is a stale v4.2.0 build that only defines
   rules for the older combined class name "elementor-widget-loop-grid-N" -
   so none of its column rules ever match, and every breakpoint falls back
   to the desktop column count, overlapping the cards on narrow screens.
   Re-declared here against the classes Elementor actually renders, so the
   grid responds correctly regardless of that mismatch. */
@media (min-width: 1025px) {
	.elementor-grid-1 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.elementor-grid-2 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor-grid-3 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.elementor-grid-4 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.elementor-grid-5 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.elementor-grid-6 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1024px) and (min-width: 768px) {
	.elementor-grid-tablet-1 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.elementor-grid-tablet-2 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elementor-grid-tablet-3 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.elementor-grid-tablet-4 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.elementor-grid-mobile-1 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.elementor-grid-mobile-2 > .elementor-widget-container > .elementor-loop-container.elementor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Toggled by assets/js/newsletter.js when a language tab is chosen. Needs
   two classes' worth of specificity (not just one) to actually win: it's
   applied to the same .e-loop-item that "display: block !important" above
   targets via ".nl-grid-section .e-loop-item" (two classes), and with both
   rules carrying !important, a tie goes to specificity, not source order -
   a single-class ".nl-card-hidden { display: none !important; }" was
   silently losing that tie and never actually hiding anything. */
.nl-grid-section .e-loop-item.nl-card-hidden { display: none !important; }

/* ---------------- Plain grid (no Elementor) - [ca_newsletter_grid] ---------------- */
.nl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.nl-grid .nl-card-hidden { display: none !important; }
@media (max-width: 1024px) { .nl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 767px)  { .nl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 480px)  { .nl-grid { grid-template-columns: 1fr; } }