:root{
  --ink:#0E1B2B;
  --muted:#505B6E;
  --bd-soft:#E5ECF5;
  --card:#fff;
  --radius:18px;
  --shadow:0 12px 28px rgba(18,38,63,.12);
}

/* ===== GRID layout ===== */
.naujienos-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  margin:40px 0;
}
.naujienos-item{
  background:transparent;
  overflow:visible;
  border-radius:10px;
  border:1px solid #171D28;
  transition:transform .3s ease, box-shadow .3s ease;
  padding:24px;
}
.naujienos-item-featured{
  grid-column:span 2;
  grid-row:span 2;
  padding:36px;
  position:relative;
}
.naujienos-item:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,.15)}
.naujienos-image{display:block;width:100%;min-height:260px;overflow:hidden;border-radius:10px;margin-bottom:23px}
.naujienos-item-featured .naujienos-image{min-height:490px;margin-bottom:46px}
.naujienos-image img{width:100%;height:100%;object-fit:cover}

.naujienos-title{
  font-size:1.5rem;font-weight:300;margin:0 0 15px;color:#000;line-height:1.3;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;text-transform:uppercase;
}
.naujienos-item-featured .naujienos-title{font-size:2.125rem;margin-bottom:20px}
.naujienos-excerpt{
  color:#000;font-weight:300;line-height:1.5;margin-bottom:20px;font-size:1rem;font-family:Archivo,system-ui,Arial,sans-serif;
}
.naujienos-item-featured .naujienos-excerpt{font-size:1.05em;margin-bottom:25px}

.form-bubble-2{position:absolute;width:40px;height:40px;background:#022D66;bottom:-19px;right:27%;border-radius:50%}
.form-bubble-3{position:absolute;width:23px;height:23px;background:#BEC3CB;bottom:-11px;right:20%;border-radius:50%}

@media (max-width:768px){
  .naujienos-grid{grid-template-columns:1fr;gap:20px;margin:20px 0}
  .naujienos-item-featured{grid-column:span 1;grid-row:span 1}
  .naujienos-item-featured .naujienos-image{min-height:360px}
}

/* =========================================================
   YOUR "More About Button" styles (verbatim)
   ========================================================= */

/* More About Button */
.more-about-btn:hover .btn-text::after {
    right: -230px;
}

.more-about-btn:hover img {
    filter: brightness(0) saturate(100%) invert(1);
}

.more-about-btn {
    position: relative;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid black;
    min-width: 350px;
}

.btn-text {
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    justify-content: center;
    width: fit-content;
    min-width: 180px;
    height: 100%;
    line-height: 100%;
    padding: 16px 80px;
    color: white;
    background: #0C4DA2;
    z-index: 2;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 600px){
    .btn-text {
        padding: 16px 24px;
    }
}

.btn-text::after {
    transition: all 0.3s ease;
    content: '';
    position: absolute;
    top: 0;
    right: -64px;
    width: 65px;
    height: 100%;
    background: #0C4DA2;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.btn-text--underlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 165px;
    background: #0C4DA2;
    z-index: 1;
    transition: right 0.3s ease;
}

.more-about-btn:hover .btn-text--underlay {
    right: 0;
}

.btn-polygon {
    display: none;
}

.btn-image {
    margin-left: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    background: transparent;
}

.btn-image img {
    width: 15px;
    object-fit: cover;
    transition: filter 0.3s ease;
    z-index: 999;
}
/* END More About Button */

/* More About Button - Mini Version */
.more-about-btn--mini:hover .btn-text::after {
    right: -110px;
}

.more-about-btn--mini:hover img {
    filter: brightness(0) saturate(100%) invert(1);
}

.more-about-btn--mini {
    position: relative;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    text-decoration: none;
    border: 0.5px solid #034EA2;
    max-width: 200px;
}

.more-about-btn--mini .btn-text {
    display: flex;
    align-items: center;
    font-family: Inter;
    font-weight: 300;
    justify-content: center;
    font-size: 0.5rem;
    width: fit-content;
    min-width: 90px;
    height: 100%;
    line-height: 100%;
    padding: 10px 16px;
    color: white;
    background: #0C4DA2;
    z-index: 2;
    box-sizing: border-box;
    position: relative;
}

.more-about-btn--mini .btn-text::after {
    transition: all 0.3s ease;
    content: '';
    position: absolute;
    top: 0;
    right: -35px;
    width: 33px;
    height: 100%;
    background: #0C4DA2;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.more-about-btn--mini .btn-text--underlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 80px;
    background: #0C4DA2;
    z-index: 1;
    transition: right 0.3s ease;
}

.more-about-btn--mini:hover .btn-text--underlay {
    right: 0;
}

.more-about-btn--mini .btn-polygon {
    display: none;
}

.more-about-btn--mini .btn-image {
    margin-left: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    background: transparent;
}

.more-about-btn--mini .btn-image img {
    width: 8px;
    object-fit: cover;
    transition: filter 0.3s ease;
    z-index: 999;
}
/* END More About Button - Mini Version */

/* (Optional helpers you had for variables/consistency; keeping intact) */
.more-about-btn{
  --arrowW: 100px;
  --gap:    65px;
  border-color: transparent;
}
.more-about-btn .btn-image{ min-width: var(--arrowW) !important; margin-left: var(--gap); }
.more-about-btn .btn-text--underlay{ right: calc(var(--arrowW) + var(--gap)) !important; }
.more-about-btn .btn-text::after{ right: calc(-1 * var(--gap)); width: var(--gap); }

@media (max-width: 768px){
  .more-about-btn{
    --arrowW: 56px;
    --gap:    24px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    min-width: 0;
    border-radius: 10px;
  }
  .more-about-btn .btn-text{ padding: 14px 22px !important; font-size: 14px; text-align: center; }
  .more-about-btn .btn-image img{ width: 18px; }
}
@media (max-width: 420px){
  .more-about-btn{ --arrowW: 48px; --gap: 22px; max-width: 100%; }
  .more-about-btn .btn-text{ padding: 12px 18px !important; font-size: 13px; }
  .more-about-btn .btn-image img{ width: 16px; }
}
/* Fix: show the blue triangle wedge */
.more-about-btn .btn-image{
  background: #fff;         /* white chevron block, like the original */
  z-index: 1 !important;    /* put it behind the triangle */
}

.more-about-btn .btn-text::after{
  z-index: 2;               /* ensure the triangle sits above the chevron block */
}
/* === BIG BUTTON: text + triangle + white chevron (no full-width sweep) === */

/* keep the button as a compact capsule (not full width) */
.naujienos-grid .more-about-btn{
  display: inline-flex;
  width: auto !important;
  min-width: 0;
  padding: 0;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
}

/* FIX: the blue underlay stays behind the text; it does NOT expand */
.naujienos-grid .more-about-btn .btn-text--underlay{
  left: 0;
  right: 165px !important;          /* <- lock it here */
  transition: none !important;      /* no movement */
  z-index: 3;                       /* above the white block */
}
.naujienos-grid .more-about-btn:hover .btn-text--underlay{
  right: 165px !important;          /* still locked on hover */
}

/* triangle sits to the left of the white block and slides across it */
.naujienos-grid .more-about-btn .btn-text::after{
  right: -64px;                     /* starts next to the white block */
  width: 65px;
  height: 100%;
  z-index: 4;                       /* above the white block */
}
.naujienos-grid .more-about-btn:hover .btn-text::after{
  right: -230px;                    /* triangle glides over the white area */
}

/* the white chevron block at the right end (fixed width) */
.naujienos-grid .more-about-btn .btn-image{
  margin-left: 65px;                /* gap that triangle “fills” on hover */
  width: 100px;
  min-width: 100px;
  height: 46px;
  background: #fff;                 /* white capsule */
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;                       /* below the triangle */
}

/* optional: darken the chevron to white on hover (your original behavior) */
.naujienos-grid .more-about-btn:hover .btn-image img{
  filter: brightness(0) saturate(100%) invert(1);
}

/* keep the text nicely stacked above everything */
.naujienos-grid .more-about-btn .btn-text{
  position: relative;
  z-index: 5;
  background: transparent !important;
  color: #fff;
}
/* ===== OLD TRIANGLE ONLY (no new elements) ===== */
.more-about-btn{
  /* widths you had: triangle ~65px, white block ~120px  */
  --triW: 65px;
  --whiteW: 120px;
}

/* White chevron block is fixed width and white */
.more-about-btn .btn-image{
  width: var(--whiteW);
  min-width: var(--whiteW);
  height: 46px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 1; /* below the triangle */
}

/* Keep the blue underlay behind the text FIXED (do NOT expand) */
.more-about-btn .btn-text--underlay{
  left: 0;
  right: var(--whiteW);        /* stops at the seam */
  transition: none !important; /* no sweep */
  z-index: 1;
}

/* Draw the classic blue triangle (same shape you had) */
.more-about-btn .btn-text::after{
  content: "";
  position: absolute;
  top: 0;
  right: calc(-1 * var(--triW));      /* sits at the seam by default */
  width: var(--triW);
  height: 100%;
  background: #0C4DA2;
  clip-path: polygon(0 0, 0 100%, 100% 100%); /* your original triangle */
  transition: right .25s ease;               /* slide only the triangle */
  z-index: 2;                                /* over white block */
  pointer-events: none;
}

/* On hover: triangle moves across the white block; blue label stays put */
.more-about-btn:hover .btn-text::after,
.more-about-btn:focus-visible .btn-text::after{
  right: calc(-1 * (var(--whiteW) + var(--triW)));
}

/* Optional: invert the chevron icon on hover (as you had) */
.more-about-btn:hover .btn-image img,
.more-about-btn:focus-visible .btn-image img{
  filter: brightness(0) saturate(100%) invert(1);
}

/* === Make the blue follow the triangle (no HTML changes) === */
.more-about-btn{
  /* tune these if your white block/triangle sizes differ */
  --whiteW: 166px;  /* width of the white chevron block (≈ 230-64) */
  --triW:   65px;   /* triangle width */
  --fill:   0px;    /* animated fill distance */
  position: relative;
}

/* Create a blue fill that grows across the white block */
.more-about-btn::after{
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% - var(--whiteW)); /* seam where white starts */
  width: var(--fill);               /* expands on hover */
  height: 46px;
  background: #0C4DA2;
  z-index: 1;                       /* under the triangle, over white */
  transition: width .25s ease;
}

/* Tie the triangle position to the same distance so they move together */
.more-about-btn .btn-text::after{
  /* overrides your fixed -64 / -230px positions */
  right: calc(-64px - var(--fill)); /* starts at -64px, slides by --fill */
  width: var(--triW);
  height: 100%;
  background: #0C4DA2;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  transition: right .25s ease;      /* sync with fill */
  z-index: 2;                       /* above the fill */
}

/* On hover/focus, expand the fill and the triangle rides with it */
.more-about-btn:hover,
.more-about-btn:focus-visible{
  --fill: var(--whiteW);
}
/* Make the triangle + blue fill slightly taller—more on the bottom only */
.more-about-btn{
  --overT: 0px;   /* extra bleed on top  */
  --overB: 6px;   /* extra bleed on bottom (tune 2–8px until perfect) */
}

/* blue fill behind the label + triangle */
.more-about-btn::after{
  top: calc(-1 * var(--overT));
  height: calc(100% + var(--overT) + var(--overB));
}

/* the moving triangle */
.more-about-btn .btn-text::after{
  top: calc(-1 * var(--overT));
  height: calc(100% + var(--overT) + var(--overB));
}
/* Put the dots overlay on top of the featured card */
.naujienos-item-featured { position: relative; }

.naujienos-item-featured .val-news__dots{
  position: absolute;
  inset: 0;                 /* cover the card */
  pointer-events: none;     /* animation overlay doesn't block clicks */
  z-index: 4;               /* above border, below most content */
}

/* Keep your original bubble look; only add motion-path bits */
.naujienos-item-featured .val-news__dot{
  position: absolute;
  /* center the circle exactly on the path line */
  transform: translate(-50%, -50%);
  /* ride the path we’ll inject from JS */
  offset-path: path(var(--orbit-path));
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: val-orbit 10s linear infinite;
  pointer-events: auto;     /* still clickable if you use them as controls */
}

/* Stagger the second/third bubbles if you have them */
.naujienos-item-featured .val-news__dot:nth-child(2){ animation-delay: -3.3s; }
.naujienos-item-featured .val-news__dot:nth-child(3){ animation-delay: -6.6s; }

@keyframes val-orbit { to { offset-distance: 100%; } }
.naujienos-item-featured .val-news__dots { position:absolute; inset:0; pointer-events:none; z-index:4; }
.naujienos-item-featured .val-news__dot { offset-path: path(var(--orbit-path)); animation: val-orbit 10s linear infinite; transform:translate(-50%,-50%); }
@keyframes val-orbit { to { offset-distance: 100%; } }
.naujienos-item-featured{ position:relative; }
.val-orbit{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:9; /* sit above the image/content */
}

.val-orbit-dot{
  position:absolute;
  transform: translate(-50%, -50%);
}
.val-orbit-dot--big  { width:22px; height:22px; border-radius:50%; background:#0C4DA2; }
.val-orbit-dot--small{ width:14px; height:14px; border-radius:50%; background:#cfd5de; }
/* 4) Button: make it full-width and remove desktop min-widths on mobile */
@media (max-width: 768px){
  .naujienos-grid{ grid-template-columns: 1fr; gap: 18px; margin: 12px 0; }
  .naujienos-item{ --pad: 16px; border-radius: 12px; }
  .naujienos-item-featured{ --pad: 18px; }

  .more-about-btn{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 10px;
  }
  .more-about-btn .btn-text{
    padding: 12px 18px !important;
    font-size: 14px !important;
    text-align: center;
  }
  .more-about-btn .btn-image{
    min-width: 64px !important;
    width: 64px !important;
    height: 46px;
    margin-left: 24px !important;
  }
}
/* Mobile: solid blue button */
@media (max-width: 768px){
  .more-about-btn{
    background:#0C4DA2 !important;
    border-color:#0C4DA2 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    border-radius:10px;
    overflow:hidden;
  }

  /* Hide the triangle/chevron pieces on mobile */
  .more-about-btn .btn-text--underlay,
  .more-about-btn .btn-text::after,
  .more-about-btn .btn-image,
  .more-about-btn .btn-polygon{
    display:none !important;
  }

  /* White label on blue background */
  .more-about-btn .btn-text{
    background:transparent !important;
    color:#fff !important;
    padding:12px 18px !important;
    font-size:14px !important;
    text-align:center;
    width:100%;
  }

  /* No hover inversion needed on mobile */
  .more-about-btn:hover img{ filter:none !important; }
}
/* Mobile: kill fixed heights and let the image size itself */
@media (max-width: 768px){
  .naujienos-image{
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 16px;              /* was 23/46px */
  }
  .naujienos-item-featured .naujienos-image{
    min-height: 0 !important;         /* override the 360/490px rules */
    height: auto !important;
  }
  .naujienos-image img{
    width: 100%;
    height: auto !important;          /* stop stretching to wrapper height */
    object-fit: cover;                /* harmless when height:auto */
    display: block;
  }
}