/**
 * Tribute Honoree Card — frontend + editor styles.
 * Scoped to .ct-honoree-card so it doesn't bleed onto other content.
 */
.ct-honoree-card {
    max-width: 720px;
    margin: 0 auto 32px;
}
.ct-honoree-card.ct-align-centered { text-align: center; }
.ct-honoree-card.ct-align-left     { text-align: left; }
.ct-honoree-card.ct-align-right    { text-align: right; }

/* Photo wrapper — inline-block so the parent's text-align (or the per-photo
   `ct-photo-align-*` row) positions it AND the explicit width/height on the
   size variants visibly applies. The previous `display: flex` made the
   wrapper stretch to full width, hiding the size differences. */
.ct-honoree-card__photo {
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: top;
    margin-bottom: 20px;
}

/* Per-photo alignment wrapper — independent of the card text alignment.
   When the photo has its own align setting, render.php emits a row div with
   one of these classes around the photo. */
.ct-honoree-card__photo-row {
    margin-bottom: 20px;
}
.ct-honoree-card__photo-row .ct-honoree-card__photo {
    margin-bottom: 0;
}
.ct-honoree-card__photo-row.ct-photo-align-left   { text-align: left; }
.ct-honoree-card__photo-row.ct-photo-align-center { text-align: center; }
.ct-honoree-card__photo-row.ct-photo-align-right  { text-align: right; }

.ct-honoree-card__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
}

/* --- Size variants (sets the wrapper's width/height; img object-covers) --- */
.ct-honoree-card__photo--size-small  { width: 96px;  height: 96px; }
.ct-honoree-card__photo--size-medium { width: 160px; height: 160px; }
.ct-honoree-card__photo--size-large  { width: 240px; height: 240px; }
.ct-honoree-card__photo--size-full {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

/* --- Shape variants --- */
.ct-honoree-card__photo--shape-circle  { border-radius: 50%; }
.ct-honoree-card__photo--shape-rounded { border-radius: 12px; }
.ct-honoree-card__photo--shape-square  { border-radius: 0; }

/* Full-width + Circle would render an oval (since size-full uses a 16:10
   landscape aspect-ratio). Force 1:1 in that combo so the circle stays
   circular — it becomes a large round portrait that fills the card width. */
.ct-honoree-card__photo--size-full.ct-honoree-card__photo--shape-circle {
    aspect-ratio: 1 / 1;
    max-width: 100%;
}

/* --- Border variants. Width is the named option; color is configurable via
   the --ct-photo-border-color CSS variable that render.php sets inline on
   the wrapper. Default is the brand orange so older saved blocks (with no
   imageBorderColor set) continue to render exactly as before. --- */
.ct-honoree-card__photo--border-none   { border: 0 none; }
.ct-honoree-card__photo--border-thin   { border: 2px solid var(--ct-photo-border-color, #F99E36); }
.ct-honoree-card__photo--border-medium { border: 4px solid var(--ct-photo-border-color, #F99E36); }
.ct-honoree-card__photo--border-thick  { border: 6px solid var(--ct-photo-border-color, #F99E36); }

/* Borders need a tiny inner gap on rounded/circle shapes so the image
   doesn't touch the border edge — looks more like a framed portrait. */
.ct-honoree-card__photo--border-thin:not(.ct-honoree-card__photo--border-none),
.ct-honoree-card__photo--border-medium,
.ct-honoree-card__photo--border-thick {
    padding: 2px;
    background: var(--ct-photo-border-color, #F99E36);
}
.ct-honoree-card__photo--border-thin:not(.ct-honoree-card__photo--border-none) .ct-honoree-card__photo-img,
.ct-honoree-card__photo--border-medium .ct-honoree-card__photo-img,
.ct-honoree-card__photo--border-thick .ct-honoree-card__photo-img {
    border-radius: inherit;
}

.ct-honoree-card__label {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(25, 29, 45, 0.55);
    margin: 0 0 8px;
    font-family: inherit;
}

.ct-honoree-card__name {
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 8px;
    font-weight: 400;
    font-family: Georgia, "Times New Roman", serif;
    color: rgba(25, 29, 45, 0.92);
}

.ct-honoree-card__dates {
    font-size: 16px;
    color: rgba(25, 29, 45, 0.6);
    margin: 0;
    letter-spacing: 0.05em;
}

/* On-dark: when the Honoree Card is placed inside a Cover hero (dark scrim),
 * render its text light so the name/label/dates stay legible over the photo.
 * Auto-applies in the photo-forward tribute patterns — no attribute needed. */
.wp-block-cover .ct-honoree-card__name {
    color: #ffffff;
}
.wp-block-cover .ct-honoree-card__label {
    color: rgba(255, 255, 255, 0.82);
}
.wp-block-cover .ct-honoree-card__dates {
    color: rgba(255, 255, 255, 0.78);
}

/* Template preview banner — shown only on the admin "Preview template" render
 * (TemplatePreview). Lives in this block's stylesheet because the honoree-card
 * block is in every tribute pattern, so this CSS is always enqueued on a preview
 * render. If a future pattern omits honoree-card, move this rule. */
.ct-template-preview-banner {
	margin: 0;
	padding: 12px 18px;
	background: #fff8e5;
	border-bottom: 1px solid #f0c33c;
	color: #5b4a16;
	font-size: 14px;
	text-align: center;
}
.ct-template-preview-banner strong {
	font-weight: 600;
}

/* Preview-only: a faint placeholder image behind the dark hero cover so the
 * preview reads as photo-backed rather than flat black. Real pages are
 * unaffected — scoped to the .ct-template-preview marker that TemplatePreview
 * adds to the preview <main>. The dim overlay is eased to ~88% so the image is
 * only lightly visible through the dark. */
.ct-template-preview .wp-block-cover {
	background-image: url(../../assets/images/preview-photo-1.svg);
	background-size: cover;
	background-position: center;
}
.ct-template-preview .wp-block-cover__background {
	/* !important beats core's .has-background-dim-100 { opacity: 1 } so the
	   placeholder shows faintly through the dark overlay. */
	opacity: 0.8 !important;
}

/* Breathing room between the "Photos & Memories" heading and the gallery on
 * tribute pages (real + preview). Scoped to .charitable-tributes-page so it
 * never affects a heading-then-gallery sequence on any other page. Applies to
 * every template whose pattern has the gallery (memorial, celebration, custom). */
.charitable-tributes-page .wp-block-heading + .wp-block-gallery {
	margin-top: 2.5rem;
}