/* =========================================================
   SAKALAM BLOCK SECTIONS (sk-blk-*)
   Styles for the "Sakalam" block patterns (About page and any
   page built from them). Every section is built from core
   blocks (Group, Heading, Paragraph, List, Image, Buttons), so
   all text, photos and links are edited in the block editor.
   A class is set in Block settings > Advanced > Additional CSS class(es).

   Loaded on the front end and inside the block editor.
   ========================================================= */

.sk-blk-page {
	--sk-blk-primary: var(--sk-primary, #FF8C00);
	--sk-blk-secondary: var(--sk-secondary, #9C0000);
	--sk-blk-deep: #5C0000;
	--sk-blk-cream: var(--sk-cream, #FFFDE9);
	--sk-blk-text: var(--sk-text, #2F2F2F);
	--sk-blk-muted: #6B6A63;
	--sk-blk-border: var(--sk-border, #E8E3D5);
	--sk-blk-gold: #FFC266;
	--sk-blk-pad: 22px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	color: var(--sk-blk-text);
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.7;
}
.sk-blk-page h1, .sk-blk-page h2, .sk-blk-page h3, .sk-blk-page h4 {
	font-family: 'Poppins', system-ui, sans-serif;
	text-wrap: balance;
	margin: 0;
	line-height: 1.3;
}
.sk-blk-page p, .sk-blk-page ul, .sk-blk-page ol, .sk-blk-page figure { margin: 0; }
.sk-blk-page a:focus-visible { outline: 3px solid var(--sk-blk-primary); outline-offset: 2px; }

/* The block editor and the theme both add margins between blocks.
   Inside these sections, spacing comes from gap instead. */
.sk-blk-page > *,
.sk-blk-box > *,
.sk-blk-card > *,
.sk-blk-hero > *,
.sk-blk-person-text > * { margin-top: 0 !important; margin-bottom: 0 !important; }
/* WordPress group layouts (flow / constrained) give children auto side margins
   and a max width, which shrinks and centres text inside these flex sections. */
.wp-block-group[class*="sk-blk-"] > * { margin-left: 0 !important; margin-right: 0 !important; }
/* The theme normally removes this wrapper from Sakalam sections (see
   includes/block-patterns.php). If it is ever present, neutralise it. */
.wp-block-group[class*="sk-blk-"] > .wp-block-group__inner-container { display: contents; }
.site-main .wp-block-group[class*="sk-blk-"] > .wp-block-group__inner-container { padding: 0 !important; max-width: none !important; margin: 0 !important; }
/* Empty paragraphs left while editing add no extra space */
.wp-block-group[class*="sk-blk-"] p:empty { display: none !important; }

/* Vertical spacing between blocks. Margins, not flex gap: gap only works while
   the container stays display:flex, and WordPress layouts, the theme or a CSS
   optimiser can change that. Every value here is the space ABOVE a block. */
.wp-block-group.sk-blk-page,
.wp-block-group.sk-blk-box,
.wp-block-group.sk-blk-hero,
.wp-block-group.sk-blk-heading,
.wp-block-group.sk-blk-person-text { display: flex !important; flex-direction: column !important; row-gap: 0 !important; }
.wp-block-group.sk-blk-card:not([class*="sk-icon-"]) { display: flex !important; flex-direction: column !important; row-gap: 0 !important; }
.wp-block-group.sk-blk-page > * + * { margin-top: 26px !important; }
.wp-block-group.sk-blk-box > * + * { margin-top: 16px !important; }
.wp-block-group.sk-blk-box > .wp-block-heading:first-child + * { margin-top: 18px !important; }
.wp-block-group.sk-blk-hero > * + * { margin-top: 14px !important; }
.wp-block-group.sk-blk-heading > * + * { margin-top: 6px !important; }
.wp-block-group.sk-blk-person-text > * + * { margin-top: 8px !important; }
.wp-block-group.sk-blk-person-text > .sk-blk-subtitle { margin-top: 2px !important; }
.wp-block-group.sk-blk-person-text > .wp-block-buttons { margin-top: 14px !important; }
.wp-block-group.sk-blk-card > * + * { margin-top: 10px !important; }
.wp-block-group.sk-blk-card[class*="sk-icon-"] > * + * { margin-top: 0 !important; }
.wp-block-group.sk-blk-card > .wp-block-buttons { margin-top: auto !important; padding-top: 14px; }
/* Paragraphs that sit directly together (several in a row) */
.wp-block-group[class*="sk-blk-"] > p + p { margin-top: 14px !important; }
/* Wrapped rows (pills, feature cards, card grid, buttons) keep their gap;
   forcing display:flex here is what makes that gap apply. */
ul.sk-blk-pills, ul.sk-blk-cards,
.wp-block-group.sk-blk-grid,
.wp-block-buttons.sk-blk-cta, .wp-block-buttons.sk-blk-links {
	display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
}
ul.sk-blk-pills > li, ul.sk-blk-cards > li { margin: 0 !important; }
/* Same spacing when a section still has WordPress's inner wrapper */
.wp-block-group.sk-blk-page > .wp-block-group__inner-container > * + * { margin-top: 26px !important; }
.wp-block-group.sk-blk-box > .wp-block-group__inner-container > * + * { margin-top: 16px !important; }
.wp-block-group.sk-blk-box > .wp-block-group__inner-container > .wp-block-heading:first-child + * { margin-top: 18px !important; }
.wp-block-group.sk-blk-hero > .wp-block-group__inner-container > * + * { margin-top: 14px !important; }
.wp-block-group.sk-blk-heading > .wp-block-group__inner-container > * + * { margin-top: 6px !important; }
.wp-block-group.sk-blk-person-text > .wp-block-group__inner-container > * + * { margin-top: 8px !important; }
.wp-block-group.sk-blk-person-text > .wp-block-group__inner-container > .sk-blk-subtitle { margin-top: 2px !important; }
.wp-block-group.sk-blk-person-text > .wp-block-group__inner-container > .wp-block-buttons { margin-top: 14px !important; }
.wp-block-group.sk-blk-card > .wp-block-group__inner-container > * + * { margin-top: 10px !important; }
.wp-block-group.sk-blk-card[class*="sk-icon-"] > .wp-block-group__inner-container > * + * { margin-top: 0 !important; }
.wp-block-group.sk-blk-card[class*="sk-icon-"] > .wp-block-group__inner-container > * { grid-column: 2; }
.wp-block-group.sk-blk-card > .wp-block-group__inner-container > .wp-block-buttons { margin-top: auto !important; padding-top: 14px; }
.wp-block-group[class*="sk-blk-"] > .wp-block-group__inner-container > p + p { margin-top: 14px !important; }
.wp-block-group[class*="sk-blk-"] > .wp-block-group__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.wp-block-group.sk-blk-grid > .wp-block-group__inner-container > * { margin: 0 !important; min-width: 0; flex: 1 1 260px; }
.wp-block-group.sk-blk-box > .wp-block-group__inner-container > .wp-block-heading:first-child { margin: 0 calc(var(--sk-blk-pad) * -1) 4px !important; padding: 14px var(--sk-blk-pad); background: var(--sk-blk-cream); border-bottom: 2px solid var(--sk-blk-primary); color: var(--sk-blk-secondary); font-size: 20px; }
@media (max-width: 768px) { .wp-block-group.sk-blk-page > .wp-block-group__inner-container > * + * { margin-top: 20px !important; } }
/* Sections placed straight in the page content, outside the page wrapper */
.entry-content > [class*="sk-blk-"] + [class*="sk-blk-"] { margin-top: 26px; }
.wp-block-group[class*="sk-blk-"] > * { max-width: none !important; }
/* ...then the reading widths these sections want */
.wp-block-group.sk-blk-box > p { max-width: 72ch !important; }
.wp-block-group.sk-blk-hero > h1,
.wp-block-group.sk-blk-hero > h2 { max-width: 24ch !important; }
.wp-block-group.sk-blk-hero > p { max-width: 62ch !important; }
.wp-block-group.sk-blk-heading > p:not(.sk-blk-eyebrow) { max-width: 70ch !important; }
.wp-block-group.sk-blk-person-text > p { max-width: 72ch !important; }
.wp-block-group.sk-blk-photo,
.sk-blk-person > .sk-blk-photo { max-width: 100% !important; }
/* Theme heading weights are light; these sections use bold Poppins. */
.sk-blk-page h1, .sk-blk-page h2, .sk-blk-page h3, .sk-blk-page h4,
[class*="sk-blk-"] .wp-block-heading { font-weight: 700; }

/* ---------- Eyebrow (small uppercase label above a heading) ---------- */
.sk-blk-eyebrow {
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sk-blk-primary);
}

/* ---------- Hero ---------- */
.sk-blk-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 36px 32px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--sk-blk-secondary), var(--sk-blk-deep));
	color: #fff;
}
.sk-blk-hero::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,140,0,.45), rgba(255,140,0,0) 70%);
	pointer-events: none;
}
.sk-blk-hero .sk-blk-eyebrow { color: var(--sk-blk-gold); }
.sk-blk-hero h1, .sk-blk-hero h2 { color: #fff; font-size: clamp(28px, 4.4vw, 42px); font-weight: 700; line-height: 1.2; max-width: 24ch; }
.sk-blk-hero strong { color: var(--sk-blk-gold); font-weight: inherit; }
.sk-blk-hero p { color: rgba(255,255,255,.85); font-size: 17px; max-width: 62ch; }
.sk-blk-hero a { color: var(--sk-blk-gold); }

/* Pills: a List block with class sk-blk-pills */
.sk-blk-pills { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.sk-blk-pills li {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--sk-blk-cream);
	color: var(--sk-blk-secondary);
	border: 1px solid var(--sk-blk-border);
}
.sk-blk-hero .sk-blk-pills li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }

/* ---------- Section box (cream head, saffron rule) ----------
   A Group with class sk-blk-box. Its FIRST block must be a Heading;
   everything after the heading is the body. */
.sk-blk-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--sk-blk-border);
	border-radius: 16px;
	overflow: hidden;
	padding: 0 var(--sk-blk-pad) var(--sk-blk-pad);
}
.sk-blk-box > .wp-block-heading:first-child,
.sk-blk-box > h2:first-child,
.sk-blk-box > h3:first-child {
	margin: 0 calc(var(--sk-blk-pad) * -1) 4px !important;
	padding: 14px var(--sk-blk-pad);
	background: var(--sk-blk-cream);
	border-bottom: 2px solid var(--sk-blk-primary);
	color: var(--sk-blk-secondary);
	font-size: 20px;
	font-weight: 700;
}
.sk-blk-box > p { max-width: 72ch; }
.sk-blk-box a:not(.wp-block-button__link) { color: var(--sk-link, #0E83CD); }

/* Section heading on its own (eyebrow + H2 + intro), outside a box */
.sk-blk-heading { display: flex; flex-direction: column; gap: 6px; }
.sk-blk-heading > * { margin: 0 !important; }
.sk-blk-heading h2 { font-size: 24px; color: var(--sk-blk-secondary); }
.sk-blk-heading p:not(.sk-blk-eyebrow) { color: var(--sk-blk-muted); max-width: 70ch; }

/* ---------- Timeline ----------
   A List block with class sk-blk-timeline. Each item:
   bold year (or label), then the text. Add or remove items freely:
   wide screens keep every item on one row; tablets and phones stack. */
.sk-blk-timeline {
	list-style: none;
	padding: 0 !important;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}
.sk-blk-timeline li {
	position: relative;
	min-width: 0;
	padding: 32px 16px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--sk-blk-muted);
}
.sk-blk-timeline li::after { /* line segment: joins into one line across the row */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 11px;
	height: 2px;
	background: var(--sk-blk-border);
}
.sk-blk-timeline li::before { /* milestone dot */
	content: "";
	position: absolute;
	left: 2px;
	top: 4px;
	z-index: 1;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--sk-blk-primary);
}
.sk-blk-timeline li:last-child::before { /* the latest milestone */
	background: var(--sk-blk-secondary);
	border-color: var(--sk-blk-secondary);
	box-shadow: 0 0 0 4px rgba(156,0,0,.14);
}
.sk-blk-timeline li strong {
	display: block;
	margin-bottom: 2px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--sk-blk-secondary);
}

/* ---------- Feature cards (List block, class sk-blk-cards) ----------
   Each item: bold title, then the text. Rows fill the width, so an
   odd count never leaves a lone card with empty space beside it. */
.sk-blk-cards {
	list-style: none;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sk-blk-cards li {
	flex: 1 1 260px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--sk-blk-cream);
	border: 1px solid var(--sk-blk-primary);
	font-size: 14px;
	line-height: 1.6;
}
.sk-blk-cards li strong {
	display: block;
	margin-bottom: 4px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 15px;
	color: var(--sk-blk-secondary);
}

/* ---------- Card grid ----------
   A Group with class sk-blk-grid holding Groups with class sk-blk-card.
   Duplicate a card to add one; the grid re-flows on its own.
   Add sk-blk-grid--row for icon-left cards (used by the trust section). */
.sk-blk-grid,
.wp-block-group.sk-blk-grid {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: stretch;
	gap: 16px;
}
/* Cards share each row equally; a card left alone on a row takes the full width. */
.sk-blk-grid > *,
.wp-block-group.sk-blk-grid > * { margin: 0 !important; min-width: 0; flex: 1 1 260px; width: auto; }
.sk-blk-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--sk-blk-border);
	border-radius: 16px;
}
.sk-blk-card h3 { font-size: 18px; color: var(--sk-blk-text); }
.sk-blk-card p { font-size: 15px; color: var(--sk-blk-muted); }
.sk-blk-card > .wp-block-buttons { margin-top: auto !important; padding-top: 4px; }
.sk-blk-box .sk-blk-card { border-radius: 12px; padding: 16px; }
.sk-blk-box .sk-blk-card h3 { font-size: 16px; color: var(--sk-blk-secondary); }
.sk-blk-box .sk-blk-card p { color: var(--sk-blk-text); font-size: 14px; }

/* Icon on a card: add one icon class next to sk-blk-card,
   e.g. "sk-blk-card sk-icon-puja". The icon sits on the left; the heading,
   text and button sit in a column on the right. */
.wp-block-group.sk-blk-card[class*="sk-icon-"] {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	column-gap: 16px;
	row-gap: 8px;
	align-content: start;
}
.wp-block-group.sk-blk-card[class*="sk-icon-"] > * { grid-column: 2; }
.sk-blk-card[class*="sk-icon-"]::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 2;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background-color: var(--sk-blk-cream);
	border: 1px solid var(--sk-blk-border);
	background-image: var(--sk-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
/* Smaller icon for cards inside a section box (trust / highlights) */
.sk-blk-box .wp-block-group.sk-blk-card[class*="sk-icon-"] { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; }
.sk-blk-box .sk-blk-card[class*="sk-icon-"]::before { width: 40px; height: 40px; border-radius: 10px; background-size: 20px 20px; }

/* Icon set (maroon line icons). To add one, copy a line and change the SVG. */
.sk-icon-puja { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c2 2.6 3 4.6 3 6.2A3 3 0 0 1 12 12a3 3 0 0 1-3-2.8C9 7.6 10 5.6 12 3Z'/%3E%3Cpath d='M4 15h16l-1.6 4.2a1.5 1.5 0 0 1-1.4.8H7a1.5 1.5 0 0 1-1.4-.8L4 15Z'/%3E%3Cpath d='M12 12v3'/%3E%3C/svg%3E"); }
.sk-icon-astrology { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='1.5'/%3E%3Cpath d='M3.5 3.5l17 17M20.5 3.5l-17 17M12 3.5 3.5 12 12 20.5 20.5 12Z'/%3E%3C/svg%3E"); }
.sk-icon-purohit { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.6' r='3.4'/%3E%3Cpath d='M12 5.2c0-1.7 1-2.7 2.5-2.7'/%3E%3Cpath d='M12 7v1.3'/%3E%3Cpath d='M4.8 21.5c.6-4.2 3.5-6.9 7.2-6.9s6.6 2.7 7.2 6.9'/%3E%3Cpath d='M8.4 15.6 14.6 21.5'/%3E%3C/svg%3E"); }
.sk-icon-temple { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v2.5'/%3E%3Cpath d='M8 11c0-3 1.8-5 4-6 2.2 1 4 3 4 6'/%3E%3Cpath d='M5 21v-7h14v7'/%3E%3Cpath d='M3.5 21h17'/%3E%3Cpath d='M6.5 14 8 11h8l1.5 3'/%3E%3Cpath d='M10 21v-3.5a2 2 0 0 1 4 0V21'/%3E%3C/svg%3E"); }
.sk-icon-book { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5v-15Z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 1 6.5 18H20v3H6.5'/%3E%3C/svg%3E"); }
.sk-icon-calendar { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3Ccircle cx='12' cy='15' r='1.6'/%3E%3C/svg%3E"); }
.sk-icon-clock { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.sk-icon-shield { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v6c0 4.4 3.2 8 7.5 9 4.3-1 7.5-4.6 7.5-9V6L12 3Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.sk-icon-globe { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z'/%3E%3C/svg%3E"); }
.sk-icon-heart { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10A4.3 4.3 0 0 1 12 7.3 4.3 4.3 0 0 1 19.5 10c0 5.4-7.5 10-7.5 10Z'/%3E%3C/svg%3E"); }
.sk-icon-star { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1 5.8L12 16.8l-5.2 2.8 1-5.8-4.3-4.1 5.9-.8L12 3.5Z'/%3E%3C/svg%3E"); }
.sk-icon-phone { --sk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C0000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); }

/* ---------- Buttons ----------
   Buttons block with class sk-blk-cta = saffron action buttons.
   Buttons block with class sk-blk-links = small outlined profile links. */
.sk-blk-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sk-blk-cta .wp-block-button .wp-block-button__link,
.sk-blk-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px !important;
	border-radius: 999px !important;
	background: var(--sk-blk-primary) !important;
	color: #fff !important;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(255,140,0,.3);
	transition: transform .15s ease, opacity .2s ease;
}
.sk-blk-cta .wp-block-button__link::after { content: "\2192"; margin-left: 2px; }
.sk-blk-cta .wp-block-button__link:hover { opacity: .92; transform: translateY(-1px); color: #fff !important; }
.sk-blk-hero .sk-blk-cta .wp-block-button__link { box-shadow: none; }

.sk-blk-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-blk-links .wp-block-button .wp-block-button__link,
.sk-blk-links .wp-block-button__link,
.advisor-link {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	border: 1px solid var(--sk-blk-secondary, #9C0000) !important;
	background: #fff !important;
	color: var(--sk-blk-secondary, #9C0000) !important;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: none;
	transition: background .15s ease;
}
.sk-blk-links .wp-block-button__link:hover,
.advisor-link:hover { background: var(--sk-blk-cream, #FFFDE9) !important; color: var(--sk-blk-secondary, #9C0000) !important; }

/* ---------- Person (photo left, text right) ----------
   A Group with class sk-blk-person: an Image block (class sk-blk-photo)
   followed by a Group with class sk-blk-person-text.
   Add sk-blk-person--plain for a text-only card (no photo). */
.sk-blk-person {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sk-blk-border);
	border-radius: 16px;
}
.sk-blk-person > * { margin: 0 !important; min-width: 0; }
.sk-blk-person--plain { grid-template-columns: minmax(0, 1fr); background: var(--sk-blk-cream); border-color: var(--sk-blk-primary); }
/* Photo removed from a person card: the text takes the full width */
.sk-blk-person:not(:has(> .sk-blk-photo)) { grid-template-columns: minmax(0, 1fr); }
.sk-blk-photo { width: 180px; max-width: 100%; }
.sk-blk-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--sk-blk-primary);
	box-shadow: 0 0 0 6px var(--sk-blk-cream);
	background: linear-gradient(135deg, var(--sk-blk-secondary), var(--sk-blk-deep));
}
.sk-blk-person-text { display: flex; flex-direction: column; gap: 8px; }
.sk-blk-person-text h3 { font-size: 21px; color: var(--sk-blk-secondary); }
/* Subtitle under the name: a Paragraph with class sk-blk-subtitle */
.sk-blk-subtitle { margin-top: -4px !important; font-size: 14px !important; font-weight: 500; font-style: italic; line-height: 1.5; color: #8A6A2F; }
.sk-blk-person-text p { font-size: 15px; max-width: 72ch; }
.sk-blk-person-text .sk-blk-links { margin-top: 6px !important; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.sk-blk-page { --sk-blk-pad: 16px; gap: 18px; }
	.wp-block-group.sk-blk-page > * + * { margin-top: 20px !important; }
	.sk-blk-hero { padding: 26px 20px; }
	.sk-blk-hero p { font-size: 16px; }
	.sk-blk-box > .wp-block-heading:first-child,
	.sk-blk-box > h2:first-child,
	.sk-blk-box > h3:first-child { font-size: 17px; padding: 12px var(--sk-blk-pad); }

	/* Person: photo on top, centred */
	.sk-blk-person { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 18px; gap: 16px; }
	.sk-blk-person .sk-blk-photo { width: 140px; }
	.sk-blk-person .sk-blk-person-text { align-items: center; }
	.sk-blk-person .sk-blk-links { justify-content: center; }
	.sk-blk-person--plain,
	.sk-blk-person:not(:has(> .sk-blk-photo)) { justify-items: stretch; text-align: left; }
	.sk-blk-person--plain .sk-blk-person-text,
	.sk-blk-person:not(:has(> .sk-blk-photo)) .sk-blk-person-text { align-items: stretch; }
	.sk-blk-person--plain .sk-blk-links,
	.sk-blk-person:not(:has(> .sk-blk-photo)) .sk-blk-links { justify-content: flex-start; }

	/* Row cards: icon on top, text below */
}
@media (max-width: 900px) {
	/* Timeline: vertical, line on the left */
	.sk-blk-timeline { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
	.sk-blk-timeline li { padding: 0 0 20px 34px; }
	.sk-blk-timeline li:last-child { padding-bottom: 0; }
	.sk-blk-timeline li::after { left: 9px; right: auto; top: 4px; bottom: 0; width: 2px; height: auto; }
	.sk-blk-timeline li:last-child::after { display: none; }
	.sk-blk-timeline li::before { left: 2px; top: 4px; }
}
@media (max-width: 600px) {
	.sk-blk-grid > * { flex-basis: 100%; }
	.sk-blk-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.sk-blk-cta .wp-block-button__link { transition: none; }
	.sk-blk-cta .wp-block-button__link:hover { transform: none; }
}

/* ---------- Page chrome ----------
   On pages that open with a Sakalam hero, the hero's H1 is the page
   title, so the theme's own title is hidden. */
.sk-blk-has-hero .entry-header,
.sk-blk-has-hero .page-header { display: none; }

/* ---------- Block editor ----------
   In the editor, show the class-based wrappers so they are easy to find. */
.editor-styles-wrapper .sk-blk-page { padding-bottom: 40px; }
.editor-styles-wrapper .sk-blk-photo img[src*="person-placeholder"] { opacity: .9; }