/*
 * Dagens ord pages (/dagens-ord/, /dagens-ord/arkiv/, word pages): helper classes for things Elementor has no
 * control for. Add them in Advanced → CSS Classes.
 */

/* tv-dw-bleed: hero photo column that runs to the edge of the screen on desktop (word-hero-visual). */
@media (min-width: 1025px) {
	.e-con.tv-dw-bleed {
		width: calc(100% + max(2.5rem, (100vw - 80rem) / 2));
		max-width: none;
		margin-right: calc(-1 * max(2.5rem, (100vw - 80rem) / 2));
	}
}
/* tv-dw-visual: stacking context so the rotated soft-gold shape stays behind the photo. */
.e-con.tv-dw-visual { isolation: isolate; }

/* tv-dw-photo-gold: the warm photo-gold tint over a photo. */
.elementor-widget.tv-dw-photo-gold { position: relative; overflow: hidden; }
.elementor-widget.tv-dw-photo-gold::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background: color-mix(in oklab, var(--e-global-color-accent, #e2b42c) 9%, transparent);
	mix-blend-mode: soft-light;
	pointer-events: none;
}

/* Photos with a fixed aspect ratio (recent 16/9, related 16/8, photo break 16/9); the frame keeps its size while the photo loads. */
.elementor-widget.tv-dw-ar-16-9 { aspect-ratio: 16 / 9; }
.elementor-widget.tv-dw-ar-16-8 { aspect-ratio: 16 / 8; }
.tv-dw-ar-16-9 img, .tv-dw-ar-16-8 img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* tv-dw-card: recent-word-card / related-word-card (loop items). */
.e-con.tv-dw-card { overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.e-con.tv-dw-card:hover { transform: translateY(-3px); box-shadow: 0 20px 58px color-mix(in oklab, var(--e-global-color-primary, #051644) 10%, transparent), 0 3px 10px color-mix(in oklab, var(--e-global-color-primary, #051644) 5%, transparent); }
.tv-dw-card img { transition: transform .4s ease; }
.tv-dw-card:hover img { transform: scale(1.025); }
.tv-dw-card:hover .tv-dw-hover-steel .elementor-heading-title { color: var(--e-global-color-secondary, #2d6ca9); }

/* tv-dw-sticky: the archive search bar stays under the header while scrolling. */
.e-con.tv-dw-sticky {
	position: sticky;
	top: 5rem;
	z-index: 30;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.admin-bar .e-con.tv-dw-sticky { top: calc(5rem + 32px); }
@media (max-width: 782px) {
	.admin-bar .e-con.tv-dw-sticky { top: calc(5rem + 46px); }
}

/* tv-dw-baseline: number and label on one text baseline ("24 ord i arkivet"). */
.e-con.tv-dw-baseline, .e-con.tv-dw-baseline > .e-con-inner { align-items: baseline; }

/* tv-dw-chip: inline pill (word class on the word page). */
.elementor-widget.tv-dw-chip { width: auto; }

@media (prefers-reduced-motion: reduce) {
	.e-con.tv-dw-card, .tv-dw-card img { transition: none; }
}

/* Max widths (Tailwind max-w-sm / xl / 2xl / 3xl) for widgets and containers. */
.elementor-widget.tv-dw-max-xl, .e-con.tv-dw-max-xl { max-width: 36rem !important; }
.elementor-widget.tv-dw-max-2xl, .e-con.tv-dw-max-2xl { max-width: 42rem !important; }
.e-con.tv-dw-max-3xl { max-width: 48rem !important; }
/* tv-dw-save: icon box of the "Spara dina egna förklaringar." band. */
.tv-dw-save .elementor-icon-box-title { margin-top: 0; }
.tv-dw-save .elementor-icon-box-description { max-width: 42rem; margin: 0; }

/* shadow-layered on a container or on an image. */
.e-con.tv-dw-shadow-layered, .tv-dw-shadow-layered img {
	box-shadow: 0 20px 58px color-mix(in oklab, var(--e-global-color-primary, #051644) 10%, transparent), 0 3px 10px color-mix(in oklab, var(--e-global-color-primary, #051644) 5%, transparent);
}

/* tv-dw-round: rounded photo frame (keeps the gold tint inside the corners). */
.elementor-widget.tv-dw-round { border-radius: 20px; }

/* tv-dw-wide: word-wide-photo, 16 / 4.5 between 12rem and 18rem tall. */
.elementor-widget.tv-dw-wide { aspect-ratio: 16 / 4.5; min-height: 12rem; max-height: 18rem; }
.tv-dw-wide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* tv-dw-fill: photo that fills its grid cell (word-test-photo, at least 24rem tall). */
.elementor-widget.tv-dw-fill { height: 100%; }
.tv-dw-fill img { display: block; width: 100%; height: 100%; min-height: 24rem; object-fit: cover; }
/* Stacked (phones): the photo keeps the Lovable 1100 x 720 frame, at least 24rem tall. */
@media (max-width: 767px) {
	.tv-dw-fill img { height: auto; aspect-ratio: 1100 / 720; }
}

/* tv-dw-icon-16: 16px icon in a small text button ("← Till ordarkivet"). */
.tv-dw-icon-16 .elementor-button-icon svg { width: 16px; height: 16px; }
.tv-dw-icon-16 .elementor-button-icon { font-size: 16px; }

/* tv-dw-center: centre a narrow widget in its column (word-not-found text). */
.elementor-widget.tv-dw-center { align-self: center; }

/*
 * tv-dw-save: Lucide "save" glyph (the Lovable icon) drawn over the Font Awesome save icon of the Icon Box.
 * Only while the Icon Box keeps the save icon; any other icon chosen in the panel shows as normal.
 */
.tv-dw-save .elementor-icon svg.e-far-save,
.tv-dw-save .elementor-icon i.fa-save::before {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7'/%3E%3Cpath d='M7 3v4a1 1 0 0 0 1 1h7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.tv-dw-save .elementor-icon svg.e-far-save path { display: none; }
.tv-dw-save .elementor-icon i.fa-save::before { content: ""; display: block; width: 1em; height: 1em; }

/*
 * Tailwind sm: (640px) values between 640 and 767px, where Elementor still uses its mobile settings.
 *   tv-dw-sm3        three columns (Loop Grid "Ord som hör ihop", grid container with the archive photos)
 *   tv-dw-sm-row     flex row, centred (the "Spara dina egna förklaringar" band)
 *   tv-dw-sm-row-end flex row, bottom-aligned ("Tre ord från veckan." + "Se hela arkivet")
 *   tv-dw-sm-30/48/60/96  heading size at sm (word gloss 30, band title 48, page titles 60, word 96)
 *   tv-dw-sm-px40    40px side padding (sm:px-10, the text column of the nivåtest band)
 * The hero rules (tv-dw-hero, tv-dw-visual, tv-dw-shape, tv-dw-hero-photo) switch at 641px, where the
 * Lovable design leaves its max-width: 640px phone layout (pt-28, 21rem visual, 20rem archive photo).
 */
@media (min-width: 640px) and (max-width: 767px) {
	.elementor-widget.tv-dw-sm3 .elementor-grid,
	.e-con.e-grid.tv-dw-sm3,
	.e-con.e-grid.tv-dw-sm3 > .e-con-inner {
		--grid-columns: 3;
		--e-con-grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
	.e-con.tv-dw-sm-row, .e-con.tv-dw-sm-row-end {
		--flex-wrap: nowrap !important;
		--container-widget-width: initial !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
	}
	.e-con.tv-dw-sm-row { align-items: center !important; }
	.e-con.tv-dw-sm-row-end { align-items: flex-end !important; }
	.e-con.tv-dw-sm-row > :first-child, .e-con.tv-dw-sm-row-end > :first-child { --width: auto; flex: 1 1 auto !important; min-width: 0; }
	.e-con.tv-dw-sm-row > :last-child, .e-con.tv-dw-sm-row-end > :last-child { flex: 0 0 auto !important; }
	.elementor-widget.tv-dw-sm-30 .elementor-heading-title { font-size: 30px !important; }
	.elementor-widget.tv-dw-sm-48 .elementor-heading-title { font-size: 48px !important; }
	.elementor-widget.tv-dw-sm-60 .elementor-heading-title { font-size: 60px !important; }
	.elementor-widget.tv-dw-sm-96 .elementor-heading-title { font-size: 96px !important; }
	.e-con.tv-dw-sm-px40 { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (min-width: 641px) and (max-width: 767px) {
	.e-con.tv-dw-hero { --padding-top: 128px !important; --padding-block-start: 128px !important; }
	.e-con.tv-dw-visual { min-height: 432px !important; }
	.e-con.tv-dw-shape { left: 32px !important; top: 32px !important; width: calc(100% - 2rem) !important; min-height: calc(100% - 2rem) !important; }
	.elementor-widget.tv-dw-hero-photo img { height: 416px !important; }
}

/* tv-dw-feature-pad: word-feature-card padding, clamp(1.5rem, 5vw, 4rem) at every width (Elementor has no clamp control). */
.e-con.tv-dw-feature-pad { padding: clamp(1.5rem, 5vw, 4rem) !important; }