/* Social Image Scheduler: landing page + share action styling.
   Scoped to .sis-landing-page / .sis-share-actions so nothing here leaks
   onto unrelated theme pages. */

.sis-landing-page {
	max-width: 100%;
}

.sis-landing-page-image-wrapper {
	margin: 0 0 1.5em;
}

/*
 * The landing page serves the ORIGINAL uploaded file (see
 * SIS_Landing_Page_Image_Service) -- that is what "full resolution" means
 * here, and it is a property of the asset that is fetched, not of how many
 * CSS pixels it is painted across. These rules therefore scale the
 * downloaded original down to fit its column instead of forcing a
 * 3840px-wide image to render at 3840px and pushing the page into a
 * horizontal scroll. `height: auto` keeps the aspect ratio correct against
 * the intrinsic width/height attributes the markup now carries.
 */
.sis-landing-page-image {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.sis-landing-page-fields {
	margin-bottom: 1.5em;
}

.sis-landing-page-field {
	margin-bottom: 0.75em;
}

.sis-landing-page-field .sis-field-value {
	white-space: pre-line;
}

.sis-share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 1em 0;
}

/* Selector must out-specify the normal action selector (two classes) so
   the admin-only yellow background always wins. Matches both the
   ".sis-share-actions" wrapper (image landing pages, the standalone
   [sis_social_share] shortcode) and ".sis-actions" (Portfolio cards, where
   these admin buttons render inside the card's own single action
   container alongside its legacy buttons -- see SIS_Portfolio_Renderer::
   render_actions()). */
/* !important throughout: portfolio.css's shared .sis-action rules (see its
   own docblock comment on that base rule) now pin box-model/typography
   properties as !important so no theme stylesheet can win the cascade for
   just one button and desync its height/font from its siblings -- this
   admin-only styling needs to keep out-specifying that base rule the same
   way it always has, so every property it overrides is !important too. */
.sis-share-actions .sis-action.sis-share-admin-action,
.sis-actions .sis-action.sis-share-admin-action {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.4em 0.8em !important;
	border: 1px solid currentColor !important;
	border-radius: 4px !important;
	text-decoration: none;
	background: #fff9c4 !important;
	cursor: pointer;
	font-size: 0.95em !important;
	font-weight: 700 !important;
	border-style: dashed !important;
}

/* Box styling (border/background/padding/font-size/min-height) for
   non-admin actions is intentionally NOT redeclared here: it is handled by
   the shared, style-key-driven .sis-action rules in portfolio.css, which
   always loads alongside this stylesheet (see SIS_Portfolio_Renderer /
   class-landing-page-service.php's enqueue calls). Redeclaring different
   literal values here previously made "View Full Size" and other Social
   Sharing actions render with a different border color/style, background,
   padding, and font-size than the same card's legacy Share/Download/
   Browse/Feedback buttons, even when both groups used the same configured
   Action Style. */
.sis-share-actions .sis-action:focus-visible,
.sis-share-actions .sis-action:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sis-landing-page-related {
	margin-top: 2em;
}

.sis-landing-page-related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.75em;
}

.sis-landing-page-related-item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.sis-landing-page-related-groups {
	margin-top: 2em;
}

.sis-landing-page-related-groups-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.sis-landing-page-related-group-button {
	display: inline-block;
	padding: 0.4em 0.9em;
	border-radius: 4px;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
}

.sis-landing-page-related-group-button-inactive {
	background: #c3c4c7;
	color: #1d2327;
}

.sis-share-status {
	display: block;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}