/*
 * Rock Solid Precast - Joomla 5 compatibility
 * The site's styles reference "Font Awesome 5 Free/Brands" (menu arrows, staff card
 * corner notch, card arrows). Joomla 5 ships Font Awesome 6, which uses different
 * family names, so those icons rendered as empty squares. These aliases point the
 * old names at the Font Awesome 6 font files bundled with the Helix template.
 * Helix loads css/custom.css automatically and updates do not overwrite it.
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.ttf") format("truetype");
}

/* ------------------------------------------------------------------
 * News listing (replaces EasyBlog card layout). Used by
 * html/com_content/category/news.php on the News menu item.
 * ------------------------------------------------------------------ */
.rsp-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
@media (max-width: 991px) { .rsp-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .rsp-news__grid { grid-template-columns: 1fr; } }

.rsp-news__card {
  background: #08184d;
  border-radius: 8px;
  color: #fff;
  padding: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.rsp-news__image {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  background: #0d2266;
}
.rsp-news__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 400ms;
}
.rsp-news__card:hover .rsp-news__image img { transform: scale(1.04); }
.rsp-news__image:after {
  content: "\f0d8";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #08184d;
  position: absolute;
  left: -22px;
  bottom: -77px;
  font-size: 100px;
  transform: rotate(-140deg);
}
.rsp-news__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: 15px;
}
.rsp-news__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.rsp-news__title a,
.rsp-news__title a:hover,
.rsp-news__title a:focus { color: #fff; }
.rsp-news__excerpt {
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.rsp-news__more { margin-top: auto; padding-bottom: 6px; }
.rsp-news__button {
  display: inline-block;
  position: relative;
  background: #fff;
  color: #09112f;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 8px 24px;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 400ms, background-color 400ms, border-color 400ms;
}
.rsp-news__button:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: #08184d;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(-132deg);
  position: absolute;
  right: -8px;
  bottom: -9px;
}
.rsp-news__button:hover,
.rsp-news__button:focus {
  background: #f26705;
  border-color: #f26705;
  color: #fff;
}
.rsp-news__pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.rsp-news__empty { text-align: center; }

/* News post page: show the cover photo in a 16:9 frame like EasyBlog did */
.itemid-274.view-article .article-full-image {
  float: none;
  width: 100%;
  margin: 0 0 25px;
}
.itemid-274.view-article .article-full-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}