/**
 * ===================================================================
 * News Section Styles
 * ===================================================================
 * Styling for the main news container and individual news blocks.
 * Assumes use of a grid system (like Bootstrap) for column layout (e.g., col-lg-4, col-md-6, col-12).
 */

.news-section {
  position: relative;
  /* Add padding to the section itself for overall spacing, especially on mobile */
  padding-top: 60px; /* Example: Adjust as needed */
  padding-bottom: 60px; /* Example: Adjust as needed */
}

/* --- Row Adjustments for Gutters --- */
/*
 * This section creates gutters (spacing) BETWEEN news blocks
 * using padding on the columns and negative margins on the row.
 * Requires '.no-gutters' or similar class on the row element
 * if your framework removes default padding.
 */
.news-section .row.has-gutters { /* Renamed for clarity, add this class to your row */
  /* Adjust negative margin to match HALF the desired total gap */
  margin-left: -10px;  /* Example: for a 20px total gap */
  margin-right: -10px; /* Example: for a 20px total gap */
}

/* --- News Block (Column Wrapper) --- */
.news-block {
  /*
   * This is the container for each news item, typically a grid column (e.g., <div class="col-lg-4 news-block">).
   * It controls the spacing *around* the news card.
   */
  margin-bottom: 20px; /* Vertical spacing between rows of news items */
  box-sizing: border-box; /* Crucial for padding calculations */
}

/* Apply padding ONLY if the row uses the custom gutter system */
.news-section .row.has-gutters > .news-block {
  /* Adjust padding to match HALF the desired total gap */
  padding-left: 10px;  /* Example: for a 20px total gap */
  padding-right: 10px; /* Example: for a 20px total gap */
  /* Total gap = padding-left + padding-right = 10px + 10px = 20px */
}


/* --- News Block Card (Visual Element) --- */
.news-block-one {
  /* Represents the actual card appearance */
  display: flex; /* Use flexbox to ensure content stretches */
  flex-direction: column; /* Stack image and text vertically */
  width: 100%;        /* Fill the parent .news-block column */
  height: 100%;       /* Allow card to grow/shrink naturally or fill height if needed */
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid rgba(14, 17, 54, 0.1);
  border-radius: 20px;
  overflow: hidden; /* Keep image hover effect contained */
  transition: box-shadow 0.3s ease; /* Optional: subtle hover effect */
}

.news-block-one:hover {
   box-shadow: 0 10px 30px rgba(14, 17, 54, 0.1); /* Optional: hover effect */
}

/* --- Inner Box (Content Wrapper within Card) --- */
/* We can simplify - often the .news-block-one itself is enough */
/* If .inner-box is needed for specific structure, keep it, otherwise merge styles */

/* Assuming .inner-box is NOT strictly necessary, styles merged into .news-block-one */
/* If you KEEP .inner-box, move relevant styles like border, radius, bg here */
/*
.news-block-one .inner-box {
    position: relative;
    display: flex; // Use flex if needed inside
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 20px; // If applying here, remove from .news-block-one
    border: 1px solid rgba(14, 17, 54, 0.1); // If applying here, remove from .news-block-one
    background-color: #fff; // If applying here, remove from .news-block-one
}
*/

/* --- Image Box --- */
.news-block-one .image-box {
  position: relative; /* Needed for potential overlays */
  display: block;
  overflow: hidden; /* Contain the image zoom */
  /* No border-radius needed here; parent (.news-block-one) handles it */
}

.news-block-one .image-box img {
  display: block; /* Remove extra space below image */
  width: 100%;
  height: 220px; /* Default height - adjust as needed */
  object-fit: cover; /* Crop image nicely */
  transition: transform 0.4s ease;
}

.news-block-one:hover .image-box img {
  transform: scale(1.05); /* Zoom effect on hover */
}

/* --- Lower Content (Text Area) --- */
.news-block-one .lower-content {
  position: relative; /* For positioning context */
  display: block;
  padding: 25px 20px; /* Default padding */
  box-sizing: border-box;
  flex-grow: 1; /* Allow text area to take remaining space if card height is fixed */
  /* Borders/radius handled by .news-block-one */
}

/* --- Content Styling --- */
.news-block-one .lower-content .post-info {
  margin-bottom: 12px;
  overflow: hidden; /* Clear floats */
  font-size: 14px; /* Slightly smaller for info */
  color: #676767;
}

.news-block-one .lower-content .post-info li {
  position: relative;
  display: inline-block; /* Use inline-block instead of float */
  margin-right: 15px; /* Space between items */
  padding-right: 16px; /* Space for the separator */
  line-height: 1.5;
  font-weight: 500;
}

.news-block-one .lower-content .post-info li:last-child {
  margin-right: 0;
  padding-right: 0;
}

.news-block-one .lower-content .post-info li a {
  color: inherit; /* Inherit color from parent */
  text-decoration: none;
}

.news-block-one .lower-content .post-info li a:hover {
  color: var(--secondary-color); /* Use CSS variables */
}

/* Separator using ::after */
.news-block-one .lower-content .post-info li:not(:last-child)::after {
  position: absolute;
  content: '';
  background: rgba(103, 103, 103, 0.4);
  width: 1px;
  height: 12px; /* Adjust height */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  right: 0; /* Position at the end of the padding */
}

.news-block-one .lower-content h3 {
  font-size: 20px; /* Adjust size */
  line-height: 1.4; /* Improve readability */
  font-weight: 600;
  margin-top: 0; /* Remove default margin if any */
  margin-bottom: 10px;
}

.news-block-one .lower-content h3 a {
  color: var(--title-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-block-one .lower-content h3 a:hover {
  color: var(--theme-color);
}

.news-block-one .lower-content p {
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6; /* Improve readability */
  color: #555; /* Adjust text color slightly */
}

.news-block-one .lower-content .link a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  color: #676767;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-block-one .lower-content .link a:hover {
  color: var(--secondary-color);
}

.news-block-one .lower-content .link a span {
  display: inline-block; /* Ensure span behaves correctly */
  padding-right: 25px; /* Space for the icon */
}

.news-block-one .lower-content .link a span::before {
  position: absolute;
  content: '\e918'; /* Make sure 'icomoon' font is loaded */
  font-family: 'icomoon';
  font-size: 16px;
  top: 50%;
  transform: translateY(-50%); /* Vertically center icon */
  right: 0;
  font-weight: 400; /* Usually normal for icons */
  transition: right 0.3s ease; /* Optional: subtle animation */
}

.news-block-one .lower-content .link a:hover span::before {
   right: -5px; /* Optional: move icon slightly on hover */
}


/**
 * ===================================================================
 * Responsiveness
 * ===================================================================
 */

/* --- Tablet & Larger --- */
@media only screen and (min-width: 768px) {
  /* Styles specific to tablets and desktops if needed */
  /* For example, ensure the gutter system is active */
  .news-section .row.has-gutters {
    margin-left: -10px;
    margin-right: -10px;
  }
  .news-section .row.has-gutters > .news-block {
    padding-left: 10px;
    padding-right: 10px;
  }
}


/* --- Mobile (Portrait Phones and below) --- */
/* Inside css/responsive.css */
@media only screen and (max-width: 767px) {

    /* ... other mobile styles ... */

    /* Target the content area within the blog details */
    .blog-details-content .lower-content {
        padding-left: 15px;  /* Reduce padding significantly */
        padding-right: 15px; /* Reduce padding significantly */
        /* You might need !important if specificity is an issue, but try without first */
    }

    /* OR, if the padding is on .news-block-one or .inner-box */
    .blog-details-content .news-block-one,
    .blog-details-content .inner-box {
         padding-left: 0; /* Remove padding if it's here */
         padding-right: 0;
    }

    /* Ensure images and videos inside scale down */
    .blog-details-content .image-box img,
    .blog-details-content .two-image img,
    .blog-details-content .two-image video {
       max-width: 100%;
       height: auto; /* Important for responsive images/videos */
       display: block; /* Prevents extra space below */
    }

    /* Adjust padding on the main container if needed for edge spacing */
     .sidebar-page-container .content-side {
        margin-left: 0 !important; /* Force remove left margin */
        padding-left: 0; /* Also check padding if needed */
     }
     
     .sidebar-page-container .sidebar-side {
    margin-right: 15px !important; /* Adjust the gap - try different values */
    margin-left: 0; /* Ensure no left margin */
    }
    /* Or target the specific class if mr_10 is the culprit */
    .blog-sidebar.default-sidebar.mr_10 {
         margin-right: 15px !important; /* Override */
    }
}

/* Optional: Specific adjustments for smaller phones */
@media only screen and (max-width: 480px) {
    .news-block-one .image-box img {
        height: 180px; /* Further adjust image height if needed */
    }
    .news-block-one .lower-content {
        padding: 15px 12px; /* Fine-tune padding */
    }
}


/**
 * ===================================================================
 * RTL (Right-to-Left) Specific Styles
 * ===================================================================
 */
.rtl .news-section .row.has-gutters {
  /* Mirror the margins */
  margin-left: -10px; /* Adjust value if changed above */
  margin-right: -10px; /* Adjust value if changed above */
}

.rtl .news-section .row.has-gutters > .news-block {
  /* Mirror the padding */
  padding-left: 10px; /* Adjust value if changed above */
  padding-right: 10px; /* Adjust value if changed above */
}

.rtl .news-block-one .lower-content .post-info li {
  /* Adjust spacing for RTL */
  margin-right: 0;
  margin-left: 15px;
  padding-right: 0;
  padding-left: 16px;
}

.rtl .news-block-one .lower-content .post-info li:last-child {
  margin-left: 0;
  padding-left: 0;
}

.rtl .news-block-one .lower-content .post-info li:not(:last-child)::after {
  /* Move separator to the left */
  right: auto;
  left: 0;
}

.rtl .news-block-one .lower-content .link a span {
  padding-right: 0;
  padding-left: 25px; /* Space for icon on the left */
}

.rtl .news-block-one .lower-content .link a span::before {
  right: auto;
  left: 0; /* Icon on the left */
}

.rtl .news-block-one .lower-content .link a:hover span::before {
   right: auto; /* Reset right */
   left: -5px; /* Move icon left on hover */
}

/* Add other RTL adjustments as needed for text-align, floats etc. */


/**
 * ===================================================================
 * Blog Classic Variant (If Applicable)
 * ===================================================================
 * Keep styles specific to '.blog-classic-content' separate.
 * Review if mobile changes above affect this layout.
 */
.blog-classic-content .news-block-one {
    /* Example: Classic variant might have different styles */
    /* border-radius: 0; */
    /* box-shadow: none; */
}
/* ... other classic styles ... */

.blog-classic-content .news-block {
    /* Classic might not need the gutter padding */
    /* padding-left: 0; */
    /* padding-right: 0; */
    /* margin-bottom: 40px; */ /* Different spacing */
}

/* Adjust classic styles for mobile if needed */
@media only screen and (max-width: 767px) {
    .blog-classic-content .news-block {
        /* Mobile specific adjustments for classic view */
    }
}