/* WebMorteza v34 - blog header + image ratio fixes */

/* Blog header: exactly the same structural behavior as the main website header. */
.mag-page > .header{
  height:86px!important;
  width:min(1240px,calc(100% - 48px))!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  gap:24px!important;
  position:relative!important;
  top:auto!important;
  right:auto!important;
  left:auto!important;
  z-index:120!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.mag-page > .header .logo{flex:0 0 auto!important}
.mag-page > .header .logo img{width:48px!important;height:48px!important;object-fit:contain}
.mag-page > .header .desktop-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px!important;
  margin:auto!important;
  min-width:0;
  white-space:nowrap;
}
.mag-page > .header .desktop-nav a{
  padding:10px 11px!important;
  font-size:12px!important;
  line-height:1.2;
}
.mag-page > .header .client-panel{
  flex:0 0 auto;
  padding:11px 15px!important;
  font-size:12px!important;
  white-space:nowrap;
}
.mag-page > .header .menu-button{flex:0 0 auto}

/* Keep the magazine tools visually separated from the main site header. */
.mag-blog-tools{
  width:min(1180px,calc(100% - 48px))!important;
  margin:4px auto 14px!important;
}

/* Featured image system: thumbnails are designed in 16:9, never crop them. */
.mag-card-image{
  height:auto!important;
  aspect-ratio:16 / 9;
  background:#eef5f2!important;
}
.mag-card-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.mag-card:hover .mag-card-image img{transform:none!important}

.article-cover{
  width:100%;
  height:auto!important;
  aspect-ratio:16 / 9;
  max-height:none!important;
  background:#eef5f2!important;
  border-radius:24px;
}
.article-cover > img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:0!important;
}

/* Editor slider / featured blog image should also show the full cover. */
.mag-feature-slider .mag-feature,
.mag-editorial-hero .mag-feature{
  aspect-ratio:16 / 9;
  min-height:0!important;
}
.mag-feature-slider .mag-feature > img,
.mag-editorial-hero .mag-feature > img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Responsive header without scattered items. */
@media(max-width:1100px){
  .mag-page > .header{
    height:74px!important;
    width:calc(100% - 32px)!important;
    gap:12px!important;
  }
  .mag-page > .header .desktop-nav{display:none!important}
  .mag-page > .header .menu-button{display:block!important;margin-right:auto!important}
  .mag-page > .header .client-panel{margin-right:0!important}
}
@media(max-width:800px){
  .mag-page > .header{width:calc(100% - 24px)!important;height:72px!important}
  .mag-page > .header .logo img{width:42px!important;height:42px!important}
  .mag-blog-tools{width:calc(100% - 24px)!important;margin-top:2px!important}
  .article-cover{border-radius:18px}
}
@media(max-width:540px){
  .mag-page > .header{width:calc(100% - 20px)!important}
  .mag-page > .header .logo span{font-size:16px!important}
  .mag-page > .header .logo small{font-size:8px!important}
  .mag-blog-tools{width:calc(100% - 20px)!important}
  .mag-card-image,.article-cover{aspect-ratio:16 / 9}
}