/*
Theme Name: NNDH Mobile Layout Fix
Theme URI: https://nndh.bd/
Description: Reversible mobile-only layout refinements for NNDH Custom. Keeps the parent theme design and desktop styles intact.
Author: NNDH
Version: 1.0.1
Template: nndh-custom-theme
Text Domain: nndh-mobile-fix
*/

@import url("../nndh-custom-theme/style.css");

/* Mobile-only refinements. Parent theme and desktop layout remain unchanged. */
@media (max-width: 700px) {
  .hero,
  .hero-image {
    min-height: 270px;
    height: 270px;
  }

  .hero-content {
    top: 18px;
    left: 18px;
    right: 18px;
    max-width: none;
  }

  .hero h1 {
    font-size: clamp(23px, 6vw, 27px);
    line-height: 1.15;
  }

  .hero p {
    font-size: 13px;
    line-height: 1.5;
  }

  .insight {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
  }

  .insight-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .insight > div[style*="flex:1"] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    width: 100%;
  }

  .insight h2 {
    font-size: 17px;
    line-height: 1.3;
  }

  .insight p {
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .insight > .btn {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 430px) {
  .hero,
  .hero-image {
    min-height: 250px;
    height: 250px;
  }

  .card-image,
  .category-card img {
    aspect-ratio: 16 / 9;
  }

  .insight {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 15px;
  }

  .insight-icon {
    width: 44px;
    height: 44px;
  }
}