/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/



/* Container with center divider */
.m-post-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  margin-top:40px;
}
.m-post-nav .m-nav-divider{
  width:1px;
  height:44px;
  background: currentColor;
  opacity:.25;
  flex:0 0 1px;
}

/* Cards use 3 children: arrow | image | text  (mirrored for next) */
.m-post-nav .m-nav-card{
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
  color:inherit;
  flex:1 1 0;
  min-width:0;
  padding:4px 0;
}

/* Fixed arrow width so the divider stays centered visually */
.m-post-nav .m-nav-arrow-wrap{
  flex:0 0 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.8;
}

/* Thumbnail */
.m-post-nav .m-nav-media{
  width:132px;      /* tweak to your eye */
  height:88px;
  border-radius:0px;
  overflow:hidden;
  flex:0 0 132px;
}
.m-post-nav .m-nav-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Text */
.m-post-nav .m-nav-info{
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.m-post-nav .m-nav-label{
  text-transform:uppercase; font-weight: 600; font-size:12px; letter-spacing:.04em; opacity:100%;
}
.m-post-nav .m-nav-title{
  font-size:14px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Ordering: prev = arrow(1) image(2) text(3)  |  next = text(1) image(2) arrow(3) */
.m-post-nav .m-nav-prev .m-nav-arrow-wrap{ order:1; }
.m-post-nav .m-nav-prev .m-nav-media{ order:2; }
.m-post-nav .m-nav-prev .m-nav-info{ order:3; text-align:left; }

.m-post-nav .m-nav-next .m-nav-info{ order:1; text-align:right; }
.m-post-nav .m-nav-next .m-nav-media{ order:2; }
.m-post-nav .m-nav-next .m-nav-arrow-wrap{ order:3; }

/* Hover */
.m-post-nav .m-nav-card:hover .m-nav-arrow{ transform: translateX(-1px); }
.m-post-nav .m-nav-next:hover .m-nav-arrow{ transform: translateX(1px); }
.m-post-nav .m-nav-arrow{ transition: transform .15s ease; }


/* Mobile: keep previous | divider | next side-by-side */
@media (max-width: 767px){
  .m-post-nav{
    display: grid;
    grid-template-columns: 1fr 1px 1fr; /* left card | divider | right card */
    align-items: center;
    gap: 12px;
    margin-top: 24px;
  }

  .m-post-nav .m-nav-divider{
    height: 36px;
    display: block;
  }

  .m-post-nav .m-nav-card{
    gap: 10px;
    padding: 8px 0;
    min-width: 0;          /* allow text to truncate */
  }

  .m-post-nav .m-nav-media{
    width: 96px;
    height: 64px;
    border-radius: 0px;
    flex: 0 0 96px;
  }

  .m-post-nav .m-nav-arrow-wrap{
    flex: 0 0 14px;
    opacity: .85;
  }

  .m-post-nav .m-nav-info{ gap: 4px; }
  .m-post-nav .m-nav-label{
    font-size: 11px;
    letter-spacing: .06em;
  }
  .m-post-nav .m-nav-title{
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Keep edges correct */
  .m-post-nav .m-nav-prev{ justify-content: flex-start; text-align: left; }
  .m-post-nav .m-nav-next{ justify-content: flex-end;   text-align: right; }
}

/* === FORCE PERFECT LEFT | DIVIDER | RIGHT LAYOUT === */
.m-post-nav{
  display:grid !important;
  grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr); /* equal halves */
  align-items:center;
  column-gap:40px;          /* space around the divider */
  width:100%;
}

/* Divider centered and full height */
.m-post-nav .m-nav-divider{
  width:1px; height:44px;
  background: currentColor; opacity:.25;
  justify-self:center;
}

/* Cards fill their half and keep internals in a row */
.m-post-nav .m-nav-card{
  display:flex; align-items:center; gap:16px;
  min-width:0; width:100%;             /* fill the grid cell */
  /* kill any theme margins that skew the split */
  margin:0 !important;
  flex: initial !important;             /* ignore any previous flex:1 rules */
}

/* Left card: content to the left */
.m-post-nav .m-nav-prev{
  justify-self:start;                   /* pin to left half */
  justify-content:flex-start;
  text-align:left;
}

/* Right card: content to the right */
.m-post-nav .m-nav-next{
  justify-self:end;                     /* pin to right half */
  justify-content:flex-end;
  text-align:right;
  margin-left:0 !important;             /* neutralize earlier tweak if present */
}

/* Keep thumbnail and text behaving */
.m-post-nav .m-nav-media{ width:132px; height:88px; border-radius:0px; overflow:hidden; flex:0 0 132px; }
.m-post-nav .m-nav-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.m-post-nav .m-nav-info{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.m-post-nav .m-nav-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Mobile keeps side-by-side (adjust sizes as needed) */
@media (max-width: 767px){
  .m-post-nav{
    column-gap:12px;
    grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
  }
  .m-post-nav .m-nav-divider{ height:36px; }
  .m-post-nav .m-nav-card{ gap:10px; padding:8px 0; }
  .m-post-nav .m-nav-media{ width:96px; height:64px; border-radius:0px; flex:0 0 96px; }
  .m-post-nav .m-nav-title{ font-size:14px; }
}

/* If any theme utility adds max-width/auto margins to the wrapper, neutralize: */
.m-post-nav{ max-width:100% !important; }