.elementor-9 .elementor-element.elementor-element-2d202c1{--display:flex;}.elementor-9 .elementor-element.elementor-element-4617036{width:100%;max-width:100%;}.elementor-9 .elementor-element.elementor-element-9caaa5c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-9 .elementor-element.elementor-element-6c7c353{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-9 .elementor-element.elementor-element-6c7c353:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-6c7c353 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-6c7c353.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-9 .elementor-element.elementor-element-9a50fa2{--grid-row-gap:30px;width:var( --container-widget-width, 108.919% );max-width:108.919%;--container-widget-width:108.919%;--container-widget-flex-grow:0;--grid-column-gap:26px;}.elementor-9 .elementor-element.elementor-element-9a50fa2.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.71 * 100% );}.elementor-9 .elementor-element.elementor-element-9a50fa2:after{content:"0.71";}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__thumbnail__link{width:100%;margin-bottom:calc(60px / 2);}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__meta-data span + span:before{content:"•";}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__card{background-color:#FFFFFF;border-width:1px;border-radius:0px;padding-top:0px;padding-bottom:0px;}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__text{margin-top:20px;}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post:hover .elementor-post__thumbnail img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 1px ) hue-rotate( 0deg );}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__badge{right:0;}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__card .elementor-post__badge{margin:20px;}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__avatar{top:calc(-60px / 2);}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__avatar img{width:60px;height:60px;}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__excerpt p{color:#FFFFFF;}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__read-more{color:#0C2BB7A6;}.elementor-9 .elementor-element.elementor-element-bfe5529{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-9 .elementor-element.elementor-element-9a50fa2:after{content:"0.5";}.elementor-9 .elementor-element.elementor-element-9a50fa2 .elementor-post__thumbnail__link{width:100%;}}@media(min-width:768px){.elementor-9 .elementor-element.elementor-element-6c7c353{--width:74.944%;}.elementor-9 .elementor-element.elementor-element-bfe5529{--width:50%;}}/* Start custom CSS for posts, class: .elementor-element-9a50fa2 */<style>
/* ============================================================
   ELEMENTOR POSTS — "Cards" skin compatible CSS
   Fixes:
   - prevents weird clipping/levágás
   - keeps a clean premium card layout
   - makes excerpt a real preview (line clamp)
   - Playfair Display title + Inter body
   Notes:
   - Paste into: Elementor > Site Settings > Custom CSS
     OR the Posts widget > Advanced > Custom CSS (Pro)
   - If you want to target only ONE widget:
     Add CSS class to the Posts widget: cs-posts-cards
     and keep the .elementor-9 .elementor-element.elementor-element-9a50fa2s with .cs-posts-cards
   ============================================================ */

/* Fonts (safe to include here) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

.elementor-widget-posts{
  --deep-petrol:#0e2a36;
  --rich-copper:#b85c1c;
  --ink:#0b1220;
  --muted:#64748b;
  --card-bg:#ffffff;
  --line: rgba(14,42,54,0.10);
  --shadow: 0 18px 45px rgba(2,6,23,0.10);
  --shadow-hover: 0 26px 60px rgba(14,42,54,0.16);
  --radius: 18px;
}

/* OPTIONAL scope to one widget:
   add "cs-posts-cards" class to the Posts widget */
.elementor-widget-posts.cs-posts-cards,
.elementor-widget-posts{
  /* nothing, just for readability */
}

/* ============================================================
   0) Layout stabilization (Cards skin often uses flex)
   Prevent text clipping by ensuring items can grow
   and overflow settings are correct.
   ============================================================ */

.elementor-widget-posts .elementor-posts-container{
  display: grid !important;
  gap: clamp(16px, 2vw, 26px) !important;
}

/* When Elementor uses columns (instead of grid), do not break it:
   Let it wrap naturally and avoid overflow hidden at container level. */
.elementor-widget-posts .elementor-posts-container,
.elementor-widget-posts .elementor-posts-container *{
  box-sizing: border-box !important;
}

/* ============================================================
   1) The card shell (Cards skin uses .elementor-post__card)
   ============================================================ */

.elementor-widget-posts .elementor-post__card{
  position: relative !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: calc(var(--radius) + 6px) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;            /* keep rounding */
  transform: translateZ(0);               /* prevent weird clipping */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.elementor-widget-posts .elementor-post__card:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(184,92,28,0.22) !important;
}

/* ============================================================
   2) Thumbnail (Cards skin: .elementor-post__thumbnail + link + img)
   Make sure the image shows and doesn't get cropped awkwardly.
   ============================================================ */

.elementor-widget-posts .elementor-post__thumbnail{
  position: relative !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.elementor-widget-posts .elementor-post__thumbnail__link{
  display:block !important;
  width:100% !important;
}

.elementor-widget-posts .elementor-post__thumbnail img{
  display:block !important;
  width:100% !important;
  height: clamp(200px, 22vw, 320px) !important; /* responsive height */
  object-fit: cover !important;
  transition: transform .85s ease !important;
  transform: scale(1.001);
}

.elementor-widget-posts .elementor-post__card:hover .elementor-post__thumbnail img{
  transform: scale(1.04) !important;
}

/* subtle overlay like your header vibe */
.elementor-widget-posts .elementor-post__thumbnail__link::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(14,42,54,0.00) 40%, rgba(14,42,54,0.22) 100%);
  pointer-events:none;
}

/* ============================================================
   3) Text area (Cards skin: .elementor-post__text)
   The clipping you saw is often because text container has
   fixed height or weird overflow; we make it flexible.
   ============================================================ */

.elementor-widget-posts .elementor-post__text{
  padding: clamp(18px, 2vw, 28px) !important;
  display:flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  overflow: visible !important; /* important: avoid cut */
}

/* meta (date/category) */
.elementor-widget-posts .elementor-post__meta-data{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--rich-copper) !important;
  margin: 0 0 10px !important;
  opacity: .95;
}

/* Title */
.elementor-widget-posts .elementor-post__title{
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
  margin: 0 0 12px !important;
  font-size: clamp(1.45rem, 1.5vw, 2.05rem) !important;
}

.elementor-widget-posts .elementor-post__title a{
  color: var(--deep-petrol) !important;
  text-decoration: none !important;
  background-image: linear-gradient(var(--deep-petrol), var(--deep-petrol));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .35s ease, color .25s ease !important;
  padding-bottom: 3px;
}

.elementor-widget-posts .elementor-post__card:hover .elementor-post__title a{
  background-size: 100% 2px !important;
}

/* Excerpt: real preview, no overtake */
.elementor-widget-posts .elementor-post__excerpt{
  margin: 0 0 16px !important;
  overflow: hidden !important;
}
.elementor-widget-posts .elementor-post__excerpt p{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color: rgba(45, 52, 54, 0.84) !important;
  line-height: 1.85 !important;
  font-size: 1.02rem !important;
  margin: 0 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3; /* preview */
  overflow: hidden !important;
}

/* ============================================================
   4) Read more: keep bottom aligned and visible
   Cards skin uses .elementor-post__read-more
   ============================================================ */
.elementor-widget-posts .elementor-post__read-more{
  margin-top: auto !important;           /* push to bottom */
  padding-top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;

  color: var(--deep-petrol) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}

.elementor-widget-posts .elementor-post__read-more::after{
  content:"→";
  font-size: 1.15rem;
  transform: translateX(0);
  transition: transform .25s ease, color .25s ease;
}

.elementor-widget-posts .elementor-post__read-more:hover{
  color: var(--rich-copper) !important;
}
.elementor-widget-posts .elementor-post__read-more:hover::after{
  transform: translateX(6px);
  color: var(--rich-copper);
}

/* ============================================================
   5) Fix common "Cards skin" oddities:
   - sometimes Elementor puts a max-height on excerpt or title
   - sometimes it sets overflow hidden on text wrappers
   ============================================================ */
.elementor-widget-posts .elementor-post__text,
.elementor-widget-posts .elementor-post__excerpt,
.elementor-widget-posts .elementor-post__title{
  max-height: none !important;
}

/* ============================================================
   6) Mobile
   ============================================================ */
@media (max-width: 768px){
  .elementor-widget-posts .elementor-post__thumbnail img{
    height: 220px !important;
  }
  .elementor-widget-posts .elementor-post__excerpt p{
    -webkit-line-clamp: 4;
  }
}

@media (max-width: 480px){
  .elementor-widget-posts .elementor-post__text{
    padding: 18px 16px !important;
  }
  .elementor-widget-posts .elementor-post__title{
    font-size: 1.45rem !important;
  }
}
</style>/* End custom CSS */