/* ================================================================================================
 * BASELINE — KMA CSS MODULE 08 — AT A GLANCE
 * ================================================================================================
 *
 * FILE: 08-at-a-glance.css
 * VERSION: 1.0
 * Last Updated: 2026-03-21
 *
 * PURPOSE
 * -------
 * Page-scoped styling for the "At a Glance" page layout.
 *
 * PRIMARY FOCUS
 * -------------
 * - Sugar Calendar Events List output
 * - Notice / Questions Loop Grid cards
 * - At-a-Glance-specific badges, widths, spacing, and responsive behavior
 *
 * SCOPE
 * -----
 * Everything in this file is intended to run ONLY inside:
 *   .at-a-glance
 *
 * IMPORTANT SCOPING NOTE
 * ----------------------
 * This file assumes your At-a-Glance page has a wrapper class:
 *   .at-a-glance
 * (Usually applied to a top Elementor container via CSS Classes.)
 *
 * IMPORTANT
 * ---------
 * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE.
 * - Duplicate / overlapping declarations remain intentionally preserved.
 * - This snapshot reflects the working production version.
 *
 * ================================================================================================ */


/* =============================================================================
 * MODULE 08A — SUGAR CALENDAR: EVENT LIST CARD STYLING
 * -----------------------------------------------------------------------------------------------
 * Targets the Sugar Calendar "Events List" block output.
 * ============================================================================= */

/* Event card wrapper (each event row/card) */
.at-a-glance .sugar-calendar-event-list-block__listview__event {

	/* Border:
	   you had "1.5px solid" with no color. Add a color if you want:
	   border: 1.5px solid rgba(0,0,0,0.18);
	   Leaving as-is will render border but may default oddly depending on browser. */
	border: 1.5px solid;

	/* Card sizing */
	width: 90%;
	box-sizing: border-box;

	/* Interior spacing */
	padding: 20px 40px 20px 20px;

	/* Card styling */
	border-radius: 12px;
	background: #fff;

	/* Shadow (matches your Elementor box shadow conversion) */
	box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.50);

	/* Typography */
	font-size: 1.05rem;
}

/* Day block inside the Sugar Calendar event card */
.sugar-calendar-event-list-block__listview__event__day__block {

	/**** Fixed day-block height. ****/
	height: 75px;
}


/* =============================================================================
 * MODULE 08A+ — SUGAR CALENDAR: EVENT CARDS CONSISTENT WIDTH + CENTERING
 * -----------------------------------------------------------------------------------------------
 * Targets: .sugar-calendar-event-list-block__listview__event (each event card)
 * ============================================================================= */

/* Base: ensure cards can center properly and never overflow their column */
.at-a-glance .sugar-calendar-event-list-block__listview__event {

	/**** Center event card within its parent container. ****/
	margin-left: auto;
	margin-right: auto;

	/**** Prevent padding/border from causing overflow. ****/
	box-sizing: border-box;
	max-width: 100%;
}


/* =============================================================================
 * MODULE 08A+ DESKTOP — EVENT CARDS NARROWER ON DESKTOP
 * -----------------------------------------------------------------------------------------------
 * NOTE: Applies only on desktop widths.
 * ============================================================================= */

@media (min-width: 1025px) {

	.at-a-glance .sugar-calendar-event-list-block__listview__event {

		/**** Narrow event cards on desktop for more inset presentation. ****/
		width: 75%;
	}
}


/* =============================================================================
 * MODULE 08A+ TABLET — FULL-WIDTH EVENT CARDS + REDUCED RIGHT PADDING
 * -----------------------------------------------------------------------------------------------
 * Goal: no overflow past the right edge.
 * ============================================================================= */

@media (max-width: 1024px) {

	.at-a-glance .sugar-calendar-event-list-block__listview__event {

		/**** Allow card to fill available tablet column width. ****/
		width: 100%;

		/**** Reduce right padding to avoid tablet overflow. ****/
		padding: 20px 20px 20px 20px;
	}

	/* Sugar Calendar: remove the internal gap inside each event card (date block ↔ content) */
	.at-a-glance
	.sugar-calendar-event-list-block
	.sugar-calendar-event-list-block__base-container
	.sugar-calendar-event-list-block__listview__event {

		/**** Remove internal event-card gap on tablet widths. ****/
		gap: 0px !important;
	}
}


/* =============================================================================
 * MODULE 08A+ PHONE — EVENTS COLUMN BREATHING ROOM + CARD WIDTH CAP
 * -----------------------------------------------------------------------------------------------
 * Mirrors notice-card treatment on phones.
 * ============================================================================= */

@media (max-width: 767px) {

	/* Give the Events column a little breathing room so cards don’t touch edges */
	.at-a-glance .at-a-glance__events {

		/**** Add side padding around Events column on phones. ****/
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Make event cards readable and consistent width (centered) */
	.at-a-glance .sugar-calendar-event-list-block__listview__event {

		/**** Full-width card with phone-specific maximum width. ****/
		width: 100%;
		max-width: 420px;
		padding: 16px 18px 16px 16px;
	}
}


/* =============================================================================
 * MODULE 08B — SUGAR CALENDAR: LIST LAYOUT SPACING
 * -----------------------------------------------------------------------------------------------
 * Controls spacing between Sugar Calendar event cards.
 * ============================================================================= */

.at-a-glance
.sugar-calendar-event-list-block
.sugar-calendar-event-list-block__base-container
.sugar-calendar-event-list-block__listview {

	/**** Gap between event cards in list view. ****/
	gap: 8px;
}


/* =============================================================================
 * MODULE 08C — COLUMN BACKGROUNDS (OPTIONAL)
 * -----------------------------------------------------------------------------------------------
 * Notices background remains commented exactly as provided.
 * ============================================================================= */

/* .at-a-glance .at-a-glance__notices { background: #fff; } */
.at-a-glance .at-a-glance__events  {

	/**** White background for Events column. ****/
	background: #fff;
}


/* =============================================================================
 * MODULE 08D — SHARED CARD SPACING
 * -----------------------------------------------------------------------------------------------
 * Adds vertical breathing room around events + notice cards.
 * ============================================================================= */

.at-a-glance .km-events-item,
.at-a-glance .km-notice-item {

	/**** Shared vertical item spacing. ****/
	padding: 14px 0;
	margin: 0;
}


/* =============================================================================
 * MODULE 08E — SHARED TITLE TYPOGRAPHY
 * -----------------------------------------------------------------------------------------------
 * Applies to both event titles and notice titles.
 * ============================================================================= */

.at-a-glance .km-events-title,
.at-a-glance .km-notice-title {

	/**** Shared title typography. ****/
	font-size: 1.05rem;
	line-height: 1.35;
	font-weight: 600;

	/**** Tighten spacing below title. ****/
	margin: 0 0 4px 0;

	/**** Keep text away from right edge. ****/
	padding: 0px 10px 0px 0px;
}


/* =============================================================================
 * MODULE 08F — ITEM SEPARATORS
 * -----------------------------------------------------------------------------------------------
 * Adds subtle divider between items except the last.
 * ============================================================================= */

.at-a-glance .km-events-item:not(:last-child),
.at-a-glance .km-notice-item:not(:last-child) {

	/**** Subtle separator line between stacked items. ****/
	border-bottom: 1px solid rgba(0,0,0,0.08);
}


/* =============================================================================
 * MODULE 08G — KM META BADGES: BASE STYLE
 * -----------------------------------------------------------------------------------------------
 * Used for:
 * - Committee Notice badge
 * - Resident Question badge
 * - KM Group badge (Roads/Trees/Social)
 * ============================================================================= */

.km-meta-badge {

	/* inline-flex keeps pill inline while allowing flex alignment */
	display: inline-flex;
	align-items: center;

	/* spacing between inline children inside the badge */
	gap: 0.6em;

	/* outer spacing (you had margin-left on every badge)
	   NOTE: this pushes every badge right; if you want true left alignment,
	   consider removing margin-left and relying on container gap instead. */
	margin-left: 0.75em;

	/* padding inside the pill */
	padding: 0.25em 10px;

	/* type */
	font-size: 0.85em;
	font-weight: 500;

	/* shape + border */
	border-radius: 5px;
	border: 2px solid transparent;
	background: transparent;

	/* keep badges from wrapping their own text */
	white-space: nowrap;

	/* prevent badges from shrinking in flex/grid situations */
	min-width: max-content;
	flex-shrink: 0;

	/* alignment when badges appear next to text */
	vertical-align: middle;
}

/* Badge label text */
.km-meta-badge__label {

	/**** Badge label emphasis. ****/
	font-weight: 600;
}

/* Badge date text (if used inside badge variants) */
.km-meta-badge__date {

	/**** Slightly softer date styling within badge. ****/
	opacity: 0.85;
	font-weight: 500;
}


/* =============================================================================
 * MODULE 08H — BADGE VARIANTS: CATEGORY BADGES
 * -----------------------------------------------------------------------------------------------
 * Committee + Resident.
 * ============================================================================= */

/* Committee Notice badge (green) */
.km-meta-badge--committee {

	/**** Committee badge colors. ****/
	border-color: rgba(47, 107, 47, 0.45);
	background: rgba(47, 107, 47, 0.08);
	color: #2f6b2f;
}

/* Resident Question badge (blue) */
.km-meta-badge--resident {

	/**** Resident badge colors. ****/
	border-color: rgba(31, 79, 163, 0.45);
	background: rgba(31, 79, 163, 0.08);
	color: #1f4fa3;
}


/* =============================================================================
 * MODULE 08I — DATE TEXT HELPERS
 * ============================================================================= */

.km-date-relative,
.km-date-absolute {

	/**** Shared date text weight. ****/
	font-weight: 500;
}


/* =============================================================================
 * MODULE 08J — NOTICE CARD: NORMALIZE BADGE SIZE INSIDE CARD
 * -----------------------------------------------------------------------------------------------
 * Ensures badges don't change size unexpectedly in different layouts.
 * ============================================================================= */

.notice-card .km-meta-badge {

	/**** Stable badge sizing inside notice cards. ****/
	font-size: 0.85rem;
	padding: 0.25rem 0.75rem;
	line-height: 1.2;

	display: inline-flex;
	align-items: center;
}


/* =============================================================================
 * MODULE 08J+ — AT A GLANCE: FIX PADDING ON ELEMENTOR-CONTAINER BADGES
 * -----------------------------------------------------------------------------------------------
 * Committee/Resident badges are Elementor Containers, not spans.
 * ============================================================================= */

.notice-card .km-meta-badge.km-meta-badge--committee,
.notice-card .km-meta-badge.km-meta-badge--resident {

	/**** Force horizontal padding on Elementor container badges. ****/
	padding-left: 0.75rem !important;
	padding-right: 0.75rem !important;
	box-sizing: border-box;
}

/* Optional: if Elementor is adding a left margin that’s throwing alignment off */
.at-a-glance .km-notice-badges .km-meta-badge {

	/**** Remove badge left margin; row gap already provides spacing. ****/
	margin-left: 0 !important;
}


/* =============================================================================
 * MODULE 08K — NOTICE BADGES ROW
 * -----------------------------------------------------------------------------------------------
 * Align badges vertically centered and keep spacing controlled.
 * ============================================================================= */

/* The container you applied: "km-notice-badges km-group" */
.at-a-glance .km-notice-badges {

	/**** Layout notice badges in a flexible row. ****/
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.25rem;
	padding: 0;
}

/* Additional row wrapper you used */
.at-a-glance .km-group {

	/**** Secondary row wrapper alignment / spacing. ****/
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.25rem;
}


/* =============================================================================
 * MODULE 08L — NOTICE DATE LINE (ICON + DATE SHORTCODE)
 * ============================================================================= */

/* Date row container */
.at-a-glance .km-notice-date-line {

	/**** Keep icon + date together on one inline row. ****/
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

/* Ensure the shortcode output doesn't become blocky */
.at-a-glance .km-notice-date-line .elementor-shortcode,
.at-a-glance .km-notice-date-line .elementor-shortcode span {

	/**** Keep shortcode output inline inside date row. ****/
	display: inline;
}

/* Calendar icon widget wrapper */
.at-a-glance .km-date-icon {

	/**** Slightly softened inline date-icon styling. ****/
	font-size: 0.95em;
	line-height: 1;
	opacity: 0.85;
}

/* Date typography inside date line */
.at-a-glance .km-notice-date-line .km-date-relative,
.at-a-glance .km-notice-date-line .km-date-absolute {

	/**** Date text styling within notice date line. ****/
	font-size: 0.95rem;
	color: #666;
}


/* =============================================================================
 * MODULE 08M — NOTICE CARD STACKING / LEFT ALIGNMENT
 * -----------------------------------------------------------------------------------------------
 * Makes badges, title, and date align on same left edge.
 * ============================================================================= */

.at-a-glance .km-event-item,
.at-a-glance .km-notice-item {

	/**** Stack item internals vertically and align to left edge. ****/
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}


/* =============================================================================
 * MODULE 08N — KM GROUP BADGE: CONTEXT LABELS (ROADS/TREES/SOCIAL)
 * ============================================================================= */

.km-meta-badge--group {

	/**** Base styling for KM group badges. ****/
	display: inline-flex;
	align-items: center;

	/* keep consistent with category badges */
	padding: 0.25rem 0.75rem;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;

	border-radius: 5px;
	border: 2px solid rgba(0,0,0,0.18);
	background: rgba(0,0,0,0.04);
	color: #444;

	white-space: nowrap;
}

/* Group color variants */
.km-meta-badge--group-roads {

	/**** Roads group badge colors. ****/
	border-color: rgba(47,107,47,0.45);
	background: rgba(47,107,47,0.08);
	color: #2f6b2f;
}

.km-meta-badge--group-trees {

	/**** Trees group badge colors. ****/
	border-color: rgba(22,163,74,0.45);
	background: rgba(22,163,74,0.10);
	color: #166534;
}

.km-meta-badge--group-social {

	/**** Social group badge colors. ****/
	border-color: rgba(2,132,199,0.45);
	background: rgba(2,132,199,0.10);
	color: #075985;
}


/* =============================================================================
 * MODULE 08O — NOTICES HEADING ICON (OPTIONAL ::before)
 * ============================================================================= */

.km-notices-heading .elementor-heading-title {

	/**** Allow heading text and optional icon to align inline. ****/
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Optional icon (commented out in your file)
.km-notices-heading .elementor-heading-title::before {
  content: "\f4ad";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #1aa6b7;
}
*/


/* =============================================================================
 * MODULE 08P — NOTICE CARD WIDTH RULES (DESKTOP/TABLET)
 * -----------------------------------------------------------------------------------------------
 * Make notice cards fill their grid cell for consistent width.
 * ============================================================================= */

.at-a-glance .notice-card {

	/**** Force notice cards to fill available grid width. ****/
	width: 100% !important;
	max-width: 100% !important;
	padding-right: 0 !important;
}

/* Notices container: stretch children */
.at-a-glance .at-a-glance__notices {

	/**** Stretch notice items to fill container. ****/
	align-items: stretch;
}


/* =============================================================================
 * MODULE 08P+ — SPACE ABOVE NOTICE PAGINATION
 * ============================================================================= */

.at-a-glance .elementor-pagination {

	/**** Space pagination away from final notice card. ****/
	margin-top: 24px;
}


/* =============================================================================
 * MODULE 08Q — MINIMUM COLUMN WIDTHS (DESKTOP/TABLET)
 * -----------------------------------------------------------------------------------------------
 * WARNING: min-width: 400px will overflow on phones.
 * ============================================================================= */

.at-a-glance .at-a-glance__events,
.at-a-glance .at-a-glance__notices {

	/**** Establish minimum desktop/tablet column width. ****/
	min-width: 400px;
}

/* Allow columns to wrap when needed */
.at-a-glance .at-a-glance__columns {

	/**** Permit columns to wrap when space runs out. ****/
	flex-wrap: wrap;
}


/* =============================================================================
 * MODULE 08R — TABLET: FORCE NOTICES LOOP GRID TO 1 COLUMN
 * ============================================================================= */

@media (max-width: 1024px) {

	.at-a-glance .at-a-glance__notices .elementor-loop-container.elementor-grid {

		/**** Force one-column notice grid on tablet and below. ****/
		grid-template-columns: 1fr !important;
	}
}


/* =============================================================================
 * MODULE 08S — MOBILE FIX: CENTER NOTICES COLUMN CONTENTS
 * -----------------------------------------------------------------------------------------------
 * - Remove min-width:400 to prevent overflow/left hugging
 * - Force 1 column
 * - Center cards
 * - Add side padding
 * ============================================================================= */

@media (max-width: 767px) {

	/* Remove the 400px constraint on small screens */
	.at-a-glance .at-a-glance__events,
	.at-a-glance .at-a-glance__notices {

		/**** Allow columns to shrink fluidly on phones. ****/
		min-width: 0 !important;
		width: 100%;
	}

	/* Force single-column grid and center items */
	.at-a-glance .at-a-glance__notices .elementor-loop-container.elementor-grid {

		/**** Single-column notice grid with centered items. ****/
		grid-template-columns: 1fr !important;
		justify-items: center;
	}

	/* Make cards readable and centered */
	.at-a-glance .notice-card {

		/**** Constrain notice card width on phones. ****/
		width: 100% !important;
		max-width: 420px !important;
	}

	/* Add horizontal padding to the column */
	.at-a-glance .at-a-glance__notices {

		/**** Add breathing room around mobile notices column. ****/
		padding-left: 12px;
		padding-right: 12px;
	}
}


/* =============================================================================
 * MODULE 08X — BADGES: FIX PILL PADDING (COMMITTEE/RESIDENT/GROUP)
 * -----------------------------------------------------------------------------------------------
 * Problem: Elementor container badges (div.e-con) can lose padding.
 * ============================================================================= */

.at-a-glance .notice-card .km-meta-badge {

	/**** Force consistent left/right pill padding in notice cards. ****/
	padding-left: 0.85rem !important;
	padding-right: 0.85rem !important;
	box-sizing: border-box;
}

/* If Elementor is injecting margin-left on badges, kill it in this row.
   You’re already spacing badges using the row’s gap. */
.at-a-glance .km-notice-badges .km-meta-badge {

	/**** Remove injected left margin from badges in notice-badge rows. ****/
	margin-left: 0 !important;
}

/* Add a little inset so the whole badge row isn’t hard against the card edge
   (helps phone + narrow layouts, including the KM Group badge). */
.at-a-glance .notice-card .km-notice-badges {

	/**** Add side inset to badge row inside notice card. ****/
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}


/* =============================================================================
 * MODULE 08Y — NOTICE CARDS: CONSISTENT WIDTH (ALL BREAKPOINTS)
 * -----------------------------------------------------------------------------------------------
 * Fix: cards should fill their grid cell and never exceed container width.
 * ============================================================================= */

.at-a-glance .notice-card {

	/**** Normalize notice card width across breakpoints. ****/
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}


/* =============================================================================
 * MODULE 08Z — TABLET: STOP RIGHT-EDGE OVERFLOW
 * -----------------------------------------------------------------------------------------------
 * Root cause: min-width:400px on BOTH columns + gaps/padding can exceed viewport.
 * ============================================================================= */

@media (max-width: 1024px) {

	.at-a-glance .at-a-glance__events,
	.at-a-glance .at-a-glance__notices {

		/**** Let columns shrink on tablet widths. ****/
		min-width: 0 !important;
	}

	/* (Optional but usually helpful) give the whole columns row a little breathing room */
	.at-a-glance .at-a-glance__columns {

		/**** Add side padding to full columns row on tablet and below. ****/
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}
}


/* =============================================================================
 * MODULE 08AA — PHONE: CENTER NOTICE CARDS
 * -----------------------------------------------------------------------------------------------
 * Ensures notice cards center cleanly within one-column phone grid.
 * ============================================================================= */

@media (max-width: 767px) {

	.at-a-glance .at-a-glance__notices .elementor-loop-container.elementor-grid {

		/**** Preserve one-column grid and center card placement. ****/
		grid-template-columns: 1fr !important;
		justify-items: center;
	}

	.at-a-glance .notice-card {

		/**** Center notice cards with capped width. ****/
		max-width: 420px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* =============================================================================
 * MODULE 08AB — DESKTOP: TIGHTEN NOTICE CARD RIGHT WHITESPACE
 * -----------------------------------------------------------------------------------------------
 * - Reduce excessive right padding
 * - Let badge row use full width
 * - Keep badges on ONE line
 * ============================================================================= */

@media (min-width: 1025px) {

	/* Slightly reduce right padding inside the notice card */
	.at-a-glance .notice-card {

		/**** Reduce horizontal padding inside desktop notice cards. ****/
		padding-right: 12px;
		padding-left: 12px;
	}

	/* Let the badge row span the full width of the card */
	.at-a-glance .notice-card .km-notice-badges {

		/**** Let desktop notice badge row span card width. ****/
		width: 100%;
		padding-right: 0;
	}

	/* Keep badges on ONE line (desktop only) */
	.at-a-glance .notice-card .km-notice-badges {

		/**** Prevent badge wrapping on desktop. ****/
		flex-wrap: nowrap;
	}

	/* Allow the title to wrap naturally under the badges */
	.at-a-glance .notice-card .km-notice-title {

		/**** Keep title fully fluid within card width. ****/
		max-width: 100%;
	}
}


/* =============================================================================
 * MODULE 08AC — DESKTOP: LIMIT NOTICE CARD WIDTH
 * -----------------------------------------------------------------------------------------------
 * Goal:
 * - Reduce excessive whitespace on the right
 * - Keep badges on one line
 * - Leave tablet + mobile untouched
 * ============================================================================= */

@media (min-width: 1025px) {

	/* Constrain notice cards on desktop */
	.at-a-glance .notice-card {

		/**** Narrow desktop notice cards and keep them left-aligned. ****/
		width: 75% !important;
		max-width: 75% !important;
		margin-left: 0;
		margin-right: auto;
	}

	/* Ensure badge row stays on one line */
	.at-a-glance .notice-card .km-notice-badges {

		/**** Keep desktop badge row on a single line. ****/
		flex-wrap: nowrap;
	}
}


/* =============================================================================
 * MODULE 08S (PRESERVED LATE BLOCK) — MOBILE: FORCE UNIFORM NOTICE CARD WIDTHS
 * -----------------------------------------------------------------------------------------------
 * Fixes “variable width cards” caused by grid centering + shrink-to-fit behavior.
 * ============================================================================= */

@media (max-width: 767px) {

	/* 1) Let the notices column actually be fluid on small screens */
	.at-a-glance .at-a-glance__notices {

		/**** Make notices column fully fluid on phones. ****/
		min-width: 0 !important;
		width: 100% !important;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* 2) Make the grid track full width, and STRETCH items (not center shrink-to-fit) */
	.at-a-glance .at-a-glance__notices .elementor-loop-container.elementor-grid {

		/**** Stretch one-column grid items to consistent width. ****/
		grid-template-columns: minmax(0, 1fr) !important;
		justify-items: stretch !important;
		width: 100% !important;
	}

	/* 3) Force each notice card to be the same width, centered within a max */
	.at-a-glance .at-a-glance__notices .notice-card {

		/**** Uniform mobile notice card width with centered max width. ****/
		width: 100% !important;
		max-width: 420px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

	/* 4) Prevent “long badge” intrinsic sizing from widening the card */
	.at-a-glance .at-a-glance__notices .notice-card,
	.at-a-glance .at-a-glance__notices .notice-card * {

		/**** Prevent child content from forcing unwanted card expansion. ****/
		min-width: 0;
	}
}


/* Remove vertical spacing between Sugar Calendar event cards */
.at-a-glance
.sugar-calendar-event-list-block
.sugar-calendar-event-list-block__base-container
.sugar-calendar-event-list-block__listview {
  /*gap: 0px !important;*/
}


/* =============================================================================
 * AT A GLANCE — NOTICE CARD WIDTH NORMALIZATION
 * ============================================================================= */

/* Desktop */
@media (min-width: 1025px) {

	.at-a-glance .notice-card {

		/**** Wider but still inset desktop notice cards. ****/
		width: 88% !important;
		max-width: 100% !important;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {

	.at-a-glance .notice-card {

		/**** Nearly full-width tablet notice cards. ****/
		width: 95% !important;
		max-width: 100% !important;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Phone */
@media (max-width: 767px) {

	.at-a-glance .notice-card {

		/**** Full-width phone notice cards with no artificial max cap. ****/
		width: 100% !important;
		max-width: none !important;
		margin-left: auto;
		margin-right: auto;
	}
}


/* =============================================================================
 * AT A GLANCE — EVENT CARD WIDTH NORMALIZATION
 * ============================================================================= */

/* Base (all sizes) */
.at-a-glance .sugar-calendar-event-list-block__listview__event {

	/**** Stable width normalization base for event cards. ****/
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

/* Desktop */
@media (min-width: 1025px) {

	.at-a-glance .sugar-calendar-event-list-block__listview__event {

		/**** Full-width event cards on desktop in this later normalization block. ****/
		width: 100%;
	}
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 768px) {

	.at-a-glance .sugar-calendar-event-list-block__listview__event {

		/**** Full-width event cards on tablet in this later normalization block. ****/
		width: 100%;
	}
}

/* Phone */
@media (max-width: 767px) {

	.at-a-glance .sugar-calendar-event-list-block__listview__event {

		/**** Full-width event cards on phone in this later normalization block. ****/
		width: 100%;
	}
}


/* =============================================================================
 * MODULE 08T — MOBILE: MATCH EVENT CARD WIDTH TO NOTICE CARDS
 * ============================================================================= */

@media (max-width: 767px) {

	/* Center the Sugar Calendar list container */
	.at-a-glance
	.sugar-calendar-event-list-block
	.sugar-calendar-event-list-block__base-container
	.sugar-calendar-event-list-block__listview {

		/**** Center Sugar Calendar list contents on phone widths. ****/
		justify-content: center;
	}

	/* Make each event card behave like a notice card */
	.at-a-glance
	.sugar-calendar-event-list-block
	.sugar-calendar-event-list-block__base-container
	.sugar-calendar-event-list-block__listview__event {

		/**** Match mobile event card max width to notice-card feel. ****/
		width: 100% !important;
		max-width: 420px !important;
		margin-left: auto;
		margin-right: auto;
	}
}


/* =============================================================================
 * MODULE 08U — AT A GLANCE / NEWS BUTTONS
 * -----------------------------------------------------------------------------
 * PURPOSE
 * -------
 * Establish a stable, predictable layout for the At-a-Glance news buttons so
 * JavaScript can safely measure them and set all buttons to the width of the
 * widest one.
 *
 * IMPORTANT
 * ---------
 * • CSS alone CANNOT make elements match the width of the widest sibling.
 * • This module intentionally avoids setting widths.
 * • JavaScript performs width equalization after layout is complete.
 *
 * SCOPE
 * -----
 * Applies ONLY to the At a Glance news button group:
 *   .km-buttons__news
 * ============================================================================= */


/* ---------------------------------------------------------------------------
 * Button container
 * --------------------------------------------------------------------------- */
.km-buttons__news{

	/* Use flexbox so buttons flow naturally */
	display: flex;

	/* Allow wrapping on smaller screens */
	flex-wrap: wrap;

	/* Consistent spacing between buttons (row + column) */
	gap: 12px;

	/* Left-align buttons by default */
	justify-content: flex-start;
}


/* ---------------------------------------------------------------------------
 * Individual buttons
 * --------------------------------------------------------------------------- */
.km-buttons__news .elementor-button{

	/* Prevent internal line wrapping so width reflects true label length */
	white-space: nowrap;

	/* Allow JS to measure natural width */
	width: auto;

	/* Ensure padding is included when JS sets an explicit width */
	box-sizing: border-box;

	/* Visual consistency */
	text-align: center;
}


/* ---------------------------------------------------------------------------
 * Mobile behavior
 * --------------------------------------------------------------------------- */
@media (max-width: 767px){

	.km-buttons__news{

		/**** Center button group on narrow screens. ****/
		justify-content: center;
	}
}


/* =============================================================================
 * MODULE 08V — POPUP #1417 ABOVE STICKY SCROLLY BANNER ON HOME
 * ============================================================================= */

/* The popup wrapper itself */
#elementor-popup-modal-1417{

	/**** Keep popup wrapper above scrolly banner / sticky layers. ****/
	z-index: 999999 !important;
}

/* Elementor’s internal dialog wrapper (belt + suspenders) */
#elementor-popup-modal-1417 .dialog-lightbox-widget{

	/**** Keep internal dialog widget above competing layers. ****/
	z-index: 999999 !important;
}

/* The dark overlay must also be above the banner */
#elementor-popup-modal-1417 .dialog-widget-overlay,
#elementor-popup-modal-1417 + .dialog-widget-overlay{

	/**** Keep popup overlay above banner while remaining below popup itself. ****/
	z-index: 999998 !important;
}