/* ==========================================================================
   SUDAIR PHARMA — HOME: LATEST NEWS

   A three-item editorial preview of the News page, scoped under .sud-hn, a
   class that exists on one section of one page.

   The section is built from native Elementor containers and widgets — heading,
   image, text editor, divider, button. Typography, colour and spacing are
   Elementor settings, so they stay editable in the panel. This file carries
   only what Elementor's controls cannot express:

     - a fixed crop ratio on the photographs
     - clamping the title and excerpt to a set number of lines
     - pushing each item's link to the bottom so the three align
     - the hover interactions

   NO CARDS. There is no box, border or shadow around an item — the three are
   separated by whitespace and held together by a shared baseline. That is what
   keeps it reading as an editorial column rather than a blog template.
   ========================================================================== */

.sud-hn {
	--hn-green: #006344;
	--hn-ink: #12312A;
	--hn-body: #55665E;
	--hn-meta: #6E8079;
	--hn-ease: cubic-bezier(.22, 1, .36, 1);
}

.sud-hn *,
.sud-hn *::before,
.sud-hn *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   THE ROW

   Three items at 33.33% already total 100% of the row, so while wrapping is on
   the column gap has nowhere to go and the third item drops to a second line.
   Wrapping is turned off on desktop in Elementor so the three shrink by the gap
   instead; tablet and mobile still wrap.
   -------------------------------------------------------------------------- */

/*
 * Every item is the full height of the row, and its body fills whatever the
 * picture leaves. Together with the auto margin on the link further down, this
 * is what lands the three "read more" links on one baseline no matter how many
 * lines each title runs to.
 */
.sud-hn .sud-hn__item { align-self: stretch; }

.sud-hn .sud-hn__body { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   THE PHOTOGRAPH

   One ratio for all three. The three source images are all close to 3:2
   already, so this crops almost nothing off any of them — the frames match
   without the pictures being cut about.
   -------------------------------------------------------------------------- */

.sud-hn .sud-hn__media {
	overflow: hidden;
	border-radius: 6px;
}

.sud-hn .sud-hn__media img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .7s var(--hn-ease);
}

@media (hover: hover) {
	.sud-hn .sud-hn__item:hover .sud-hn__media img { transform: scale(1.045); }
}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */

/*
 * Two lines are reserved for the metadata whether it needs them or not, so the
 * three titles start on the same line even though one category name is much
 * longer than the others.
 */
.sud-hn .sud-hn__meta { min-block-size: 2.9em; }

/*
 * The headlines are the real ones and they are long — the shortest is 71
 * characters, the longest 118. Clamping keeps the three columns level without
 * a single word being cut from the stored title, which stays complete in the
 * markup and on the article itself.
 */
.sud-hn .sud-hn__ttl .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * The kit styles links as `.elementor-kit-5 a` — a class and a tag — so a
 * single class here would lose and the headline would turn the global link
 * colour. Three classes plus the tag wins it back.
 */
.sud-hn .sud-hn__ttl .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--hn-ease);
}

.sud-hn .sud-hn__ttl .elementor-heading-title a:hover { color: var(--hn-green); }

/* The excerpts are the stored ones, which run to 453 characters at the longest. */
.sud-hn .sud-hn__exc p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* --------------------------------------------------------------------------
   THE ITEM LINK

   A text link, not a button — the section already ends in one real button and
   three more would make it a card UI.
   -------------------------------------------------------------------------- */

.sud-hn .sud-hn__more {
	/* Pushes the link to the bottom of the body, which is what aligns them. */
	margin-block-start: auto;
	padding-block-start: 1.15rem;
}

.sud-hn .sud-hn__more .elementor-button {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--hn-green);
	fill: var(--hn-green);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	/* text-transform: uppercase removed — site uses normal capitalization */
	box-shadow: none;
}

.sud-hn .sud-hn__more .elementor-button:hover {
	background: transparent;
	color: var(--hn-green);
	transform: none;
	box-shadow: none;
}

.sud-hn .sud-hn__more .elementor-button-icon {
	transition: transform .35s var(--hn-ease);
}

.sud-hn .sud-hn__item:hover .sud-hn__more .elementor-button-icon,
.sud-hn .sud-hn__more .elementor-button:hover .elementor-button-icon {
	transform: translateX(5px);
}

/*
 * The closing call to action is the site's own .sud-btn pill.
 *
 * It has to be restated here rather than left to design-system.css, because the
 * Home page's own Elementor stylesheet carries
 * `.elementor-widget-button .elementor-button { background: var(--e-global-color-accent) }`
 * — white, which suits the buttons sitting on this page's dark hero bands. That
 * selector and `.sud-btn .elementor-button` are both two classes, so load order
 * decides and the page stylesheet wins: on this white section the button came
 * out white on white and vanished.
 *
 * Three classes settles it whatever the order. The values are the design
 * system's own tokens, not new ones, so the button stays identical to every
 * other primary button on the site and follows any change made there.
 */
.sud-hn .sud-hn__cta .elementor-button {
	background: var(--sud-green-700, #006344);
	border: 1px solid var(--sud-green-700, #006344);
	color: #fff;
	fill: #fff;
	border-radius: 100px;
	padding: .95rem 1.75rem;
	font-family: var(--sud-font-body);
	font-size: var(--sud-text-sm, .875rem);
	font-weight: 600;
	letter-spacing: .08em;
}

.sud-hn .sud-hn__cta .elementor-button:hover {
	background: var(--sud-green-800, #004E35);
	border-color: var(--sud-green-800, #004E35);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 98, 65, .22);
}

.sud-hn .sud-hn__cta .elementor-button-icon {
	transition: transform .35s var(--hn-ease);
}

.sud-hn .sud-hn__cta .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   RESPONSIVE

   Tablet turns each item on its side rather than squeezing three columns into
   768px — at that width three abreast leaves about 215px each, which is the
   "cramped" the brief rules out. Elementor carries the direction and the
   widths; this only relaxes the clamps now that the lines are wider.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) and (min-width: 768px) {
	.sud-hn .sud-hn__meta { min-block-size: 0; }

	.sud-hn .sud-hn__ttl .elementor-heading-title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.sud-hn .sud-hn__more { padding-block-start: .9rem; }
}

@media (max-width: 767px) {
	.sud-hn .sud-hn__meta { min-block-size: 0; }

	/*
	 * Still clamped, just looser.
	 *
	 * Nothing needs holding level once the items are stacked, but letting the
	 * excerpts run in full put the section at 2545px on a 375px screen — three
	 * paragraphs of 430-odd characters each. This is a preview; the whole piece
	 * is one tap away. Four lines keeps each item scannable and brings the
	 * section back to a sensible length.
	 */
	.sud-hn .sud-hn__exc p {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}

	.sud-hn .sud-hn__more { margin-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.sud-hn .sud-hn__media img,
	.sud-hn .elementor-button-icon,
	.sud-hn .sud-hn__ttl .elementor-heading-title a { transition: none; }

	.sud-hn .sud-hn__item:hover .sud-hn__media img { transform: none; }
}