.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}.lfr-layout-structure-item-dfb2bff4-a57f-c81d-a12f-4a177b235c1e {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-dfd6eb32-8ba4-9032-3b09-4903e12a5c18 {
text-align: center !important;
}
.lfr-layout-structure-item-a9e63c46-92da-9713-0133-32f00b18affd {
margin-bottom: var(--spacer-4,1.5rem) !important;
margin-top: var(--spacer-6,4.5rem) !important;
}
.lfr-layout-structure-item-96626277-5497-eee7-3d91-f8b4bfe7455c {
background-color: #FFFFFF !important;
border-color: #FAFDFB !important;
margin-top: var(--spacer-5,3rem) !important;
padding-bottom: var(--spacer-5,3rem) !important;
padding-top: var(--spacer-5,3rem) !important;
}
.lfr-layout-structure-item-fee12fd3-089d-060b-a0f7-39b14825010e {
border-radius: 10px !important;
}
.lfr-layout-structure-item-e288afc3-ff61-2f68-339a-6f93c39fbd92 {
text-align: center !important;
}
.lfr-layout-structure-item-b805d71e-8145-ccbf-4614-9c9083f94bc9 {
border-radius: 10px !important;
}
.lfr-layout-structure-item-f0fd544f-cd74-3832-85fa-d6f93a7d243e {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-8731e659-c0a0-4c9a-ebd8-362fbcb8df83 {
border-radius: 10px !important;
}
.lfr-layout-structure-item-d4e571ad-46fd-a844-144f-ef46dfef24d7 {
border-radius: 10px !important;
}
.lfr-layout-structure-item-ea95b72a-50b7-c183-716b-bf6c00e4483b {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-5c5c131e-c75d-8aa1-c83e-20dde123c6e5 {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-9bcf2b25-04f1-a58a-c319-244ab065bfb8 {
padding-bottom: var(--spacer-4,1.5rem) !important;
text-align: center !important;
}
.lfr-layout-structure-item-409e5cf6-71c9-8c94-2006-e1725611ed1f {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-a4623e75-9116-4cb3-d3da-e15043e249be {
border-color: #FAFDFB !important;
}
.lfr-layout-structure-item-68ae2305-69f1-b2ba-9088-6c750d3f73bd {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-f1e554b0-2263-71b8-0fbb-66bca50f1362 {
border-radius: 10px !important;
}
.lfr-layout-structure-item-35f07c7a-3900-aaea-7ca7-4bdcabe97ac3 {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-12c732af-fd9d-7fb4-e6a5-f92590c0f370 {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-bf665d76-ee79-99f8-a2dc-ce9aa29a0d14 {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-4c04f87e-d661-6ab6-0264-29b022dd91eb {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-66b6eadc-103c-cb0b-1bb1-ec8372674d0e {
padding-bottom: var(--spacer-4,1.5rem) !important;
text-align: center !important;
}
.lfr-layout-structure-item-56674fb8-7a2a-4577-c12f-6e19302e25c9 {
text-align: center !important;
}
.lfr-layout-structure-item-79dfca85-b64e-30ba-3ef4-616b017bed06 {
border-radius: 10px !important;
}
.lfr-layout-structure-item-ddf26213-4560-84b8-bd64-a677a6dde310 {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-d9f6845b-e31b-c574-90ef-5437f30cab1e {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-b11a7731-658f-31d5-fbd9-ed699b2cb04d {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-8d46432c-54de-3e0d-4920-543cb9d6d7a2 {
height: 250px !important;
max-width: 658px !important;
padding-top: var(--spacer-4,1.5rem) !important;
text-align: center !important;
}
.lfr-layout-structure-item-24075a3a-5747-5ecc-3601-e787c8654001 {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-05194c0a-74e6-912e-3f5d-0342335964ab {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-375d2111-ed5d-faae-8a1e-9863b4beb3e7 {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-858560f5-7f89-7ae5-5539-c7a0fe8cdb76 {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-b58babfd-5740-ebc3-769b-7f5fb45cd45e {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-ea9a188e-4f9d-965a-da00-b5957d6e3d1b {
padding-top: var(--spacer-2,0.5rem) !important;
color: var(--color-neutral-10) !important;
}
.lfr-layout-structure-item-aebc7348-32e2-3cfa-ff26-48a79da1b5a4 {
border-radius: 10px !important;
}
.lfr-layout-structure-item-ef2070ba-6fd8-2612-4f26-e32eceab3e01 {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-ef2070ba-6fd8-2612-4f26-e32eceab3e01) !important;
height: 250px !important;
}
.lfr-layout-structure-item-06238553-5c5b-96cf-6184-5918a257cbe8 {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-c3fa3673-1fe2-9e58-0101-c927080cbe5d {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-02bf7911-3c62-d417-14d8-5d86a260c4e3 {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-1e5e0072-202d-d8d6-f665-e937df715bd9 {
background-color: #EDF6F3 !important;
border-radius: 10px !important;
margin-bottom: var(--spacer-5,3rem) !important;
margin-left: var(--spacer-3,1rem) !important;
margin-right: var(--spacer-3,1rem) !important;
padding-bottom: var(--spacer-3,1rem) !important;
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
box-shadow: var(--box-shadow) !important;
}
/*
  Styles (styles.css) for the responsive Liferay card fragment.
  This CSS defines the layout, appearance, and the sliding hover effect for the CTA button.
*/
:root {
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --card-border-radius: 12px;
  --main-text-color: #2c2c2c;
  --secondary-text-color: #888888;
  --button-bg-color: #000000;
  --button-text-color: #ffffff;
  --overlay-bg-color: rgba(255, 255, 255, 0.95);
  --transition-speed: 0.3s;
}

/* Container for all cards, using flexbox for a responsive grid layout */
.card-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Individual card item styling */
.card-item {
  width: 100%;
  max-width: 380px;
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden; /* This is crucial for containing the image and the sliding overlay */
  background-color: #ffffff;
  position: relative;
  transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

/*
  New hover effect to elevate the card.
  The transform moves it up, and the new box-shadow makes it look elevated.
*/
.card-item:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  transform: translateY(-5px);
}

/* Responsive image styling */
.card-image-wrapper {
    position: relative;
    padding-top: 75%; /* 4:3 Aspect Ratio (300/400 * 100) */
    overflow: hidden;
}

.card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content area below the image */
.card-content {
  position: relative; /* Needed for the absolute-positioned overlay */
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--main-text-color);
  margin: 0 0 0.5rem 0;
}

.card-hashtags {
  font-size: 0.875rem;
  color: var(--secondary-text-color);
  font-style: italic;
  margin: 0;
}

/* Overlay for the CTA button, hidden by default */
.card-cta-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--overlay-bg-color);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform var(--transition-speed) ease;
}

/* Slide up animation on hover */
.card-item:hover .card-cta-overlay {
  transform: translateY(0);
}

/* CTA button styling */
.card-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--transition-speed) ease;
}

.card-cta-button:hover {
  background-color: #333333;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .card-list-container {
    padding: 0.5rem;
  }
  .card-item {
    max-width: none;
  }
}.lfr-layout-structure-item-f6ea3d4d-1b00-df8b-1996-1a45f820b42b {
padding-bottom: var(--spacer-3,1rem) !important;
padding-top: var(--spacer-3,1rem) !important;
color: var(--color-brand-primary-darken-5) !important;
}
.lfr-layout-structure-item-9dea5aab-f771-acf3-a1af-89f48e9f47cc {
border-radius: 10px !important;
}