/*
 * Visual polish for content rendered by the native DCE widget
 * replacements (see mu-plugins/dce-widgets/). See
 * wp-content/PATCHES/2026-08-16-departments-card-fix.md for the
 * departments-centres investigation this first entry came from.
 */

/*
 * departments-centres (dyncontel-acfposts, template 35746): each
 * department renders TWO stacked widgets — a call-to-action "hero" card
 * (photo background + title, already a clean compact card, ~200x100)
 * and a second ElementsKit image-box widget duplicating the same photo
 * and title with no size constraint anywhere in the template's own
 * saved data (its "custom dimension" setting has no companion
 * "size=custom" control saved alongside it, so Elementor's image-size
 * group control falls back to full/native size — a pre-existing content
 * gap in the template itself, confirmed via the raw saved settings, not
 * something introduced by rendering it natively). That duplicate is what
 * was showing as an oversized, unstyled "icon" — hiding it and grid-
 * laying the remaining (already correctly sized) cards is the direct
 * fix, without touching _elementor_data.
 */
.dce-acfposts-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

/*
 * dce-views (class-pu-dce-views.php): each item's own width comes from the
 * widget's real dce_views_style_col_width setting, applied inline per item
 * (see that class) -- this container only needs to let same-row items sit
 * side by side instead of the block-level default of one-per-line.
 */
.dce-views-results {
	display: flex;
	flex-wrap: wrap;
}

/*
 * data-columns="1" (DCE's own columns_grid=1 setting): a single-column
 * list of full-width rows, not a card grid -- confirmed on /syllabus/,
 * where each "card" is really a 3-field data row (title | year range |
 * updated date) laid out by the referenced template's own internal
 * columns. Left under the fixed-width card-grid default above, WP_Query
 * results here (course listings, not photo cards) got squeezed into
 * ~270px grid cells, wrapping long titles character-by-character.
 * Schools/departments-centres save columns_grid=4 and are unaffected
 * (falls through to the default rule above, unchanged).
 */
.dce-acfposts-results[data-columns="1"] {
	grid-template-columns: 1fr;
}

/*
 * The actual direct child of .dce-acfposts-results is the item's own
 * <a class="dce-acfposts-item-link"> wrapper (class-pu-dce-acfposts.php
 * always wraps each result in a link when the template is clickable) —
 * .dce-acfposts-item is one level further in. Left unstyled, that <a>
 * keeps its browser-default `display: inline`, so it doesn't reliably
 * stretch to fill its grid cell — confirmed as the cause of the uneven,
 * seemingly-random card placement reported on /schools/ (a real Elementor
 * "Article Box" grid there, not the height issue fixed separately in
 * pu-tp-widgets.css). Grid blockifies a direct child's outer display,
 * but that alone doesn't guarantee it fills the cell width when the
 * child's own content doesn't stretch to match — being explicit here
 * removes the ambiguity regardless of what other global `a` styling
 * might be in play.
 */
.dce-acfposts-results > .dce-acfposts-item-link {
	display: block;
	width: 100%;
}

.dce-acfposts-item .elementskit-info-image-box {
	display: none;
}

/*
 * dyncontel-acf-relation's "grid" format (class-pu-dce-acf-relation.php)
 * outputs DCE's own real class names verbatim (dce-view-row grid-page
 * grid-col-md-N / item-page per item) — deliberately, so any saved
 * per-instance column count keeps meaning what it always meant. What
 * was missing is the CSS backing those classes: DCE's own stylesheet
 * (assets/css/style.css) never loads while the plugin stays inactive,
 * so a "grid" list rendered as plain stacked full-width blocks (each
 * .item-page is a block-level div with no width/flex rule at all) —
 * this is why faculty lists (acf_relation_col: 5) showed vertically
 * instead of the intended 5-column horizontal row. Rules below are
 * copied verbatim from DCE's own style.css (1 through 6 columns — the
 * full range that CSS file defines; the widget's own column control
 * doesn't go higher), not reinvented, so any saved column count
 * continues to mean exactly what it did in the original data.
 */
.grid-page {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
}

.grid-page .item-page {
	flex-grow: 0;
	flex-shrink: 1;
}

.grid-page.grid-col-md-1 .item-page { flex-basis: 100%; }
.grid-page.grid-col-md-2 .item-page { flex-basis: 50%; }
.grid-page.grid-col-md-3 .item-page { flex-basis: 33.3333%; }
.grid-page.grid-col-md-4 .item-page { flex-basis: 25%; }
.grid-page.grid-col-md-5 .item-page { flex-basis: 20%; }
.grid-page.grid-col-md-6 .item-page { flex-basis: 16.6666%; }