/* Northern Sky - Project Details Tabs
   Structural / layout CSS only. Colors, typography, spacing, columns and
   sizes are controlled per-instance from the Elementor Style tab (see the
   widget's "selectors" in class-project-details-widget.php).

   Mechanic: one sticky tab bar (.nsm-pd-tabs) sits above a set of
   .nsm-pd-panel blocks, only one of which (.is-active) is visible at a
   time - project-details.js just toggles that class on click, no scroll
   tracking involved (unlike Category Showcase's stacked sections). */

.nsm-pd,
.nsm-pd *,
.nsm-pd *::before,
.nsm-pd *::after {
	box-sizing: border-box;
}

.nsm-pd {
	position: relative;
	width: 100%;
}

.nsm-pd-empty,
.nsm-pd-empty-inline {
	padding: 24px;
	text-align: center;
	opacity: 0.6;
}

/* Editor-only heads-up (see maybe_render_dynamic_tag_warning() in the
   widget class) - never shows on the live front end. */
.nsm-pd-editor-hint {
	margin-bottom: 12px;
	padding: 10px 14px;
	background: #fff8e5;
	border: 1px solid #f0c36d;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: #664d03;
	text-align: left;
}

/* ---------------------------------------------------------
 * Heading
 * ------------------------------------------------------- */

.nsm-pd-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

.nsm-pd-title,
.nsm-pd-subtitle {
	margin: 0;
}

/* ---------------------------------------------------------
 * Tab bar
 * ------------------------------------------------------- */

.nsm-pd-tabs {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
}

.nsm-pd-tabs-static .nsm-pd-tabs {
	position: static;
}

.nsm-pd-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ---------------------------------------------------------
 * Panels
 * ------------------------------------------------------- */

.nsm-pd-panel {
	display: none;
}

.nsm-pd-panel.is-active {
	display: block;
}

.nsm-pd-panel-box {
	width: 100%;
}

.nsm-pd-panels {
	width: 100%;
}

/* ---------------------------------------------------------
 * Features - icon grid
 * ------------------------------------------------------- */

.nsm-pd-icon-grid {
	display: grid;
	grid-template-columns: repeat(var(--nsm-pd-icon-cols, 5), 1fr);
	border-bottom: 1px solid transparent;
}

.nsm-pd-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

.nsm-pd-icon-item-image {
	display: block;
	object-fit: contain;
}

.nsm-pd-icon-item-title {
	display: block;
	line-height: 1.3;
}

/* "Cell Dividers (Table Grid)" mode - the Gap control creates real empty
   space between grid cells, so a border drawn on each cell would just
   float inside its own box instead of forming a flush table line. This
   mode kills the gap (!important - it must win over the per-instance Gap
   rule Elementor generates, which is more specific) and uses padding
   instead, so the divider lines drawn on each item's own border sit
   directly against their neighbours. */
.nsm-pd-icon-grid.nsm-pd-grid-dividers {
	gap: 0 !important;
}

.nsm-pd-icon-grid.nsm-pd-grid-dividers .nsm-pd-icon-item {
	padding: 20px 16px;
	border-style: solid;
	border-width: 0 1px 1px 0;
}

/* No line under the very last row (it may be a partial row, e.g. 2 items
   left over from 5 columns) - project-details.js measures actual layout
   at runtime to find which items are in it, since the column count is
   responsive and the last row is often not full. */
.nsm-pd-icon-grid.nsm-pd-grid-dividers .nsm-pd-icon-item.nsm-pd-last-row {
	border-bottom-width: 0;
}

/* ---------------------------------------------------------
 * Features - grouped points
 * ------------------------------------------------------- */

.nsm-pd-groups {
	display: grid;
	grid-template-columns: repeat(var(--nsm-pd-group-cols, 4), 1fr);
	/* Transparent by default so toggling "Divider Above Section" (Style
	   tab > Features - Grouped Points) on/off never shifts the layout by
	   a pixel - only the color control changes. */
	border-top: 1px solid transparent;
}

.nsm-pd-group {
	min-width: 0;
}

.nsm-pd-group-title {
	margin: 0 0 12px;
}

.nsm-pd-group-points {
	display: flex;
	flex-direction: column;
}

.nsm-pd-group-point {
	position: relative;
	padding-left: 14px;
	line-height: 1.5;
}

.nsm-pd-group-point::before {
	content: "-";
	position: absolute;
	left: 0;
}

/* ---------------------------------------------------------
 * Floor plans
 * ------------------------------------------------------- */

.nsm-pd-floor-plan {
	display: flex;
	justify-content: center;
}

.nsm-pd-floor-plan-inner {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.nsm-pd-floor-plan[data-zoom="1"] .nsm-pd-floor-plan-inner {
	cursor: zoom-in;
}

.nsm-pd-floor-plan-image {
	display: block;
	width: 100%;
	height: auto;
}

.nsm-pd-floor-plan-zoom-icon {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	pointer-events: none;
}

.nsm-pd-floor-plan-zoom-icon svg {
	display: block;
}

/* ---------------------------------------------------------
 * Lightbox (floor plan zoom)
 * ------------------------------------------------------- */

body.nsm-pd-lightbox-lock {
	overflow: hidden;
}

.nsm-pd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
}

.nsm-pd-lightbox.is-open {
	display: flex;
}

.nsm-pd-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.nsm-pd-lightbox-image {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	cursor: zoom-in;
	transition: transform 0.25s ease;
	transform: scale(1);
}

.nsm-pd-lightbox-image.is-zoomed {
	cursor: zoom-out;
	transform: scale(1.8);
}

.nsm-pd-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

/* ---------------------------------------------------------
 * Amenities (nearby places)
 * ------------------------------------------------------- */

.nsm-pd-amenities {
	display: grid;
	grid-template-columns: repeat(var(--nsm-pd-amenities-cols, 3), 1fr);
}

.nsm-pd-amenity-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 14px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid transparent;
}

/* "Column Dividers (Table Grid)" mode - same fix as the Features icon
   grid: the Gap control creates real empty space between columns, so a
   border-right per item would float instead of sitting flush against its
   neighbour. This kills the gap (!important - must win over the more
   specific per-instance Gap rule) and adds horizontal padding instead.
   The existing border-bottom row divider above is untouched. */
.nsm-pd-amenities.nsm-pd-grid-dividers {
	gap: 0 !important;
}

.nsm-pd-amenities.nsm-pd-grid-dividers .nsm-pd-amenity-item {
	padding-left: 16px;
	padding-right: 16px;
	border-right-style: solid;
	border-right-width: 1px;
}

.nsm-pd-amenity-icon {
	flex-shrink: 0;
	object-fit: contain;
}

.nsm-pd-amenity-body {
	min-width: 0;
}

.nsm-pd-amenity-title,
.nsm-pd-amenity-desc {
	margin: 0;
}

.nsm-pd-amenity-desc {
	margin-top: 4px;
}

/* ---------------------------------------------------------
 * Video walkthrough
 * ------------------------------------------------------- */

.nsm-pd-video-frame {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.nsm-pd-video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.nsm-pd-video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.nsm-pd-video-frame.is-playing .nsm-pd-video-overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.nsm-pd-video-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
}

.nsm-pd-video-play svg {
	display: block;
}

/* ---------------------------------------------------------
 * Project progress
 * ------------------------------------------------------- */

.nsm-pd-progress {
	display: block;
	width: 100%;
}

.nsm-pd-progress-main {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.nsm-pd-progress-main-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.nsm-pd-progress-thumbs {
	display: flex;
	flex-wrap: wrap;
	margin-top: 16px;
}

.nsm-pd-progress-thumb {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	padding: 0;
	border: 2px solid transparent;
	cursor: pointer;
	background: #000;
}

.nsm-pd-progress-thumb-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.nsm-pd-progress-thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	pointer-events: none;
}

.nsm-pd-progress-thumb-play svg {
	fill: currentColor;
}

/* ---------------------------------------------------------
 * Location
 * ------------------------------------------------------- */

.nsm-pd-location {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
}

/* The label sits at the top and the title/address group sits at the
   bottom, stretched to match the map's height on the side - matches the
   reference design, where a lot of empty space separates the two. */
.nsm-pd-location-side {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.nsm-pd-location-text {
	min-width: 0;
}

.nsm-pd-location-title {
	margin: 0 0 10px;
}

.nsm-pd-address {
	margin: 0;
	line-height: 1.6;
}

/* "Directions Link" (location_direction_link) - optional, sits right under
   the address. margin-top is set by the "Directions Link Space Above"
   style control (direction_link_top_spacing). */
.nsm-pd-location-direction {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

.nsm-pd-location-direction-arrow {
	line-height: 1;
}

.nsm-pd-location-map-wrap {
	flex: 1 1 320px;
	min-width: 0;
}

.nsm-pd-location-map-label {
	display: block;
	letter-spacing: 0.05em;
}

.nsm-pd-location-map {
	display: block;
	width: 100%;
	height: auto;
}

/* Embed (iframe) variant of the map - used instead of the plain <img>
   above when "Map Embed Code or URL" is filled in
   (location_map_embed_url). Usually holds the <iframe> snippet pasted
   straight from Google Maps, kept as-is (see render_location_panel()), so
   it won't carry our own .nsm-pd-location-map class - this targets any
   iframe inside the wrapper instead. An iframe can't size itself the way
   the static image does with height:auto, so the wrapper gets an explicit
   height (the "Embed Map Height" style control, map_embed_height -
   responsive) and the iframe is positioned to fill it, overriding
   whatever fixed width="600" height="450" attributes Google's own snippet
   included. The Map Max Width / Map Corner Radius style controls target
   this wrapper directly (see their selectors in
   register_style_location()) so they keep working for both variants. */
.nsm-pd-location-map-embed {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.nsm-pd-location-map-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.nsm-pd-video-overlay,
	.nsm-pd-lightbox-image {
		transition: none !important;
	}
}

/* ---------------------------------------------------------
 * Mobile
 * ------------------------------------------------------- */

@media (max-width: 767px) {
	/* The icon grid / grouped points / amenities column counts each come
	   straight from that section's own "Columns" Style control (see
	   icons_columns / groups_columns / amenities_columns in
	   class-project-details-widget.php) - each already has its own
	   mobile_default and writes a CSS custom property that the base
	   grid-template-columns rules above read directly, so they're
	   already fully responsive on their own. This media query used to
	   hardcode grid-template-columns: repeat(2, 1fr) here for all three
	   grids, which silently overrode whatever "Columns" was actually set
	   to on mobile (Grouped Points defaults to 1 column on mobile, for
	   example, but this made it always render 2 regardless) - removed so
	   the Style tab value is what actually renders. */

	/* Two equal-width tabs per row instead of each tab hugging its own
	   text width, which used to leave a short label like "Amenities"
	   sitting in a narrow box right next to a long one like "Video
	   Walkthrough" in a completely different width. Text is allowed to
	   wrap to a second line here (instead of the desktop nowrap) so a
	   long label doesn't overflow its now-narrower box. */
	.nsm-pd-tab {
		flex: 1 1 calc( 50% - 4px );
		white-space: normal;
		text-align: center;
	}

	.nsm-pd-location {
		flex-direction: column;
	}

	.nsm-pd-location-map-wrap {
		width: 100%;
	}
}