/*-----------------------------------------------------

    Title :  The Academy of Public Administration
    Usage :  news and announcements pages
    Edited:  2025-10-24

-------------------------------------------------------

    1. news
    2. responsive ( 991px)

-------------------------------------------------------*/




/*  1. news
-------------------------------------------------------*/

#news {
	padding-block: 70px 27px;
	}

#news h1 {
	margin-bottom: 0;
	font-size: 35.44px;
	}

#news form {
	--column-gap: 13px;
	display: flex;
	justify-content: space-between;
	margin-block: 29px 29px;
	}

#news fieldset {
	flex-shrink: 0;
	align-content: flex-start;
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	padding-right: calc(var(--column-gap) / 2);
	width: 54.417%;
	}

#news :nth-child(1) + fieldset {
	padding-inline: calc(var(--column-gap) / 2);
	width: 33.33%;
	}

#news fieldset > span {
	margin-bottom: 19px;
	width: 100%;
	color: #828DA5;
	font-size: 14px;
	}

#news form > div::before {
	content: "|";
	display: block;
	visibility: hidden;
	margin-bottom: 19px;
	font-size: 14px;
	}

#news fieldset .magnifying-glass-sm {
	--color-icon: #1C3467;
	position: absolute;
	top: 12px;
	left: 0;
	}

#news fieldset:nth-child(1) > div {
	position: relative;
	width: 100%;
	}

#news fieldset input {
	padding: 0;
	width: 100%;
	height: 45px;
	color: #1D2A42;
	font-size: 16px;
	background-color: transparent;
	border-width: 0;
	border-bottom: 1px solid #9DABC9;
	}

#news fieldset .magnifying-glass-sm + input {
	padding-left: 30px;
	}

#news fieldset:nth-child(2) > div {
	position: relative;
	width: calc((100% - var(--column-gap)) / 2);
	}

#news fieldset:nth-child(2) > div input {
	padding-right: 30px;
	}

#news fieldset:nth-child(2) > div [type="date"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	}

#news fieldset:nth-child(2) > div input::placeholder {
	color: #757575;
	}

#news fieldset:nth-child(2) > div input::-moz-placeholder {
	opacity: 1;
	}

#news fieldset:nth-child(2) > div button {
	--color-clickable-icon-static: #5975B9;
	position: absolute;
	top: 8px;
	right: 0;
	padding: 0;
	background-color: transparent;
	border-width: 0;
	}

#news fieldset ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 35px;
	margin-bottom: 0;
	padding-left: 0;
	width: 100%;
	color: #5E6B87;
	font-size: 14px;
	}

#news fieldset li::marker {
	color: transparent;
	font-size: 0;
	}

#news fieldset li button {
	color: inherit;
	padding: 5px 20px;
	background-color: transparent;
	border: 1px solid #D2DBF1;
	border-radius: 3px;
	transition-property: color, background-color, border-color;
	}

#news fieldset li button:is(:hover, :focus) {
	color: #fff;
	background-color: #012659;
	border-color: #012659;
	}

#news form > div { /* buttons */
	flex-grow: 1;
	padding-top: 5px;
	padding-left: calc(var(--column-gap) / 2);
	}

#news form > div button {
	display: block;
	padding: 0;
	width: 100%;
	height: 40px;
	font-size: 12px;
	border-width: 0;
	}

#news form > div button[type="submit"] {
	color: #fff;
	background-color: #1C3467;
	}

#news form > div button[type="reset"] {
	margin-top: 24px;
	color: #5975B9;
	background-color: transparent;
	}

#news article {
	padding-block: 25px;
	border-top: 1px solid transparent;
	}

#news article:is(:has(> picture), :has(> a > picture)) {
	position: relative;
	padding-left: 285px;
	min-height: 221px;
	}

#news article + article {
	border-top-color: #ECEFF8;
	}

#news article picture {
	position: absolute;
	top: 25px;
	left: 0;
	}

#news article time {
	position: relative;
	top: -1px;
	display: block;
	margin-bottom: -1px;
	color: #3B5491;
	font-size: 14px;
	}

#news article time b {
	display: block;
	margin-bottom: -5px;
	font-size: 20.81px;
	}

#news article h2 {
	--color-link-static: #3B5491;
	--color-link-hover: #828DA5;
	display: flex;
	flex-direction: column;
	margin-top: 13px;
	margin-bottom: 0;
	font-size: 14px;
	}

#news article p {
	margin-top: 14px;
	margin-bottom: 0;
	color: #5D657A;
	font-size: 16px;
	line-height: 1.25;
	}



/*  2. responsive ( 991px)
-------------------------------------------------------*/

@media (max-width:  991px) {

/*  1. news  */

#news form {
	display: block;
	margin-bottom: 30px;
	}

#news fieldset {
	padding-right: 0;
	width: auto;
	}

#news :nth-child(1) + fieldset {
	margin-top: 40px;
	padding-inline: 0;
	width: auto;
	}

#news form > div::before {
	content: none;
	}

#news fieldset ul {
	margin-top: 25px;
	}

#news form > div { /* buttons */
	margin-top: 40px;
	padding-top: 0;
	padding-left: 0;
	}

#news article:is(:has(> picture), :has(> a > picture)) {
	padding-left: 0;
	min-height: revert;
	}

#news article picture {
	position: static;
	display: flex;
	}

#news article picture img {
	width: 100%;
	}

#news article * + time {
	margin-top: 15px;
	}

}




/* Desktop üçün şəkil qutusunu ölçüləndir - YENİ */
#news article picture {
  position: absolute; /* səndə var, saxlayırıq */
  top: 25px;
  left: 0;
  width: 260px;            /* <<< ƏSAS: sabit en */
  aspect-ratio: 4 / 3;     /* seçim: 16/9 da edə bilərsən */
  overflow: hidden;        /* kənardan daşanı gizlət */
  border-radius: 8px;      /* estetik */
}

/* Şəkli qutunu tam doldur */
#news article picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* mərkəzi saxlayıb kəsir */
}

@media (min-width: 992px) {
	/* Məqalə mətni üçün soldan boşluq – şəkil eninə uyğun */
	#news article:is(:has(> picture), :has(> a > picture)) {
	  padding-left: 285px;     /* 260px en + 25px boşluq */
	  min-height: 234px;       /* səndə var idi; uyğun gəlir */
	}
}

/* Mobil üçün – artıq səndə var, bir az gücləndirək */
@media (max-width: 991px) {
  #news article picture {
    position: static;      /* row axınında */
    width: 100%;
    aspect-ratio: auto;    /* təbii nisbət */
    border-radius: 8px;
  }

  #news article picture img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}