/* SimplyIrfan Magazine 2.10.77 — responsive homepage layout corrections. */

/* Hero Only: lead story first, then compact supporting story rows. */
@media (min-width:641px) and (max-width:1024px) {
 .si-homepage--hero_only .hero-only-layout{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;align-items:start!important}
 .si-homepage--hero_only .hero-only-center{grid-column:1/-1!important;grid-row:1!important}
 .si-homepage--hero_only .hero-only-feature{height:auto!important;min-height:0!important;aspect-ratio:16/9!important}
 .si-homepage--hero_only .hero-only-left{grid-column:1!important;grid-row:2!important}
 .si-homepage--hero_only .hero-only-right{grid-column:2!important;grid-row:2!important}
 .si-homepage--hero_only .hero-only-side{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:12px!important}
 .si-homepage--hero_only .hero-only-story{flex:none!important;grid-template-columns:92px minmax(0,1fr)!important;gap:11px!important;align-items:center!important;padding:0 0 12px!important}
 .si-homepage--hero_only .hero-only-thumb{width:92px!important;aspect-ratio:1.2!important}
 .si-homepage--hero_only .hero-only-story-copy h2{font-size:14px!important;line-height:1.3!important}
 .si-homepage--hero_only .hero-only-meta{font-size:10px!important;gap:5px!important}
}
@media(max-width:640px){
 .si-homepage--hero_only .hero-only-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important;padding:12px 0 18px!important}
 .si-homepage--hero_only .hero-only-center{grid-column:1!important;grid-row:1!important}
 .si-homepage--hero_only .hero-only-feature{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/3!important;border-radius:9px!important}
 .si-homepage--hero_only .hero-only-feature-copy{left:16px!important;right:16px!important;bottom:16px!important}
 .si-homepage--hero_only .hero-only-feature-copy .eyebrow{margin-bottom:7px!important}
 .si-homepage--hero_only .hero-only-feature-copy h1{font-size:clamp(21px,6vw,27px)!important;line-height:1.17!important;margin-bottom:9px!important;overflow-wrap:anywhere!important}
 .si-homepage--hero_only .hero-only-feature-meta{padding-top:8px!important;font-size:10px!important}
 .si-homepage--hero_only .hero-only-side{display:contents!important}
 .si-homepage--hero_only .hero-only-story{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;gap:12px!important;align-items:center!important;min-width:0!important;padding:0 0 12px!important;border-bottom:1px solid var(--line)!important}
 .si-homepage--hero_only .hero-only-thumb{width:96px!important;aspect-ratio:1.2!important;border-radius:6px!important}
 .si-homepage--hero_only .hero-only-story-copy{min-width:0!important}
 .si-homepage--hero_only .hero-only-story-copy .eyebrow{font-size:9px!important;margin-bottom:4px!important}
 .si-homepage--hero_only .hero-only-story-copy h2{font-size:14px!important;line-height:1.28!important;margin:0 0 5px!important;overflow-wrap:anywhere!important}
 .si-homepage--hero_only .hero-only-meta{font-size:10px!important;gap:5px!important}
}
@media(max-width:380px){
 .si-homepage--hero_only .hero-only-story{grid-template-columns:82px minmax(0,1fr)!important;gap:10px!important}
 .si-homepage--hero_only .hero-only-thumb{width:82px!important}
 .si-homepage--hero_only .hero-only-story-copy h2{font-size:13px!important}
}

/* Classic Grid: 3 desktop, 2 tablet, and compact horizontal cards on phones. */
.si-home-style-classic_grid .latest-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch!important;gap:22px!important}
.si-home-style-classic_grid .latest-card{display:flex!important;flex-direction:column!important;min-width:0!important;overflow:hidden!important;border:1px solid var(--line)!important;border-radius:9px!important;background:var(--surface)!important}
.si-home-style-classic_grid .latest-image{display:block!important;position:relative!important;width:100%!important;height:auto!important;aspect-ratio:16/10!important;overflow:hidden!important;border-radius:0!important}
.si-home-style-classic_grid .latest-image>img,.si-home-style-classic_grid .latest-image>.image-placeholder{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
.si-home-style-classic_grid .latest-copy,.si-home-style-classic_grid .latest-copy--overlay{position:static!important;display:block!important;min-width:0!important;width:100%!important;padding:14px 15px 16px!important;color:var(--text)!important;background:var(--surface)!important;overflow:visible!important}
.si-home-style-classic_grid .latest-copy .eyebrow{margin:0 0 7px!important}
.si-home-style-classic_grid .latest-copy .latest-title{position:static!important;display:block!important;margin:0 0 7px!important;padding:0!important;color:var(--text)!important;background:transparent!important;text-align:left!important;text-shadow:none!important;font-size:clamp(16px,1.4vw,20px)!important;line-height:1.28!important;overflow-wrap:anywhere!important}
.si-home-style-classic_grid .latest-copy .latest-title a{color:inherit!important}
.si-home-style-classic_grid .latest-copy .traditional-meta{display:flex!important;flex-wrap:wrap!important;gap:5px 8px!important;font-size:11px!important}
.si-home-style-classic_grid .latest-copy .traditional-excerpt{margin:7px 0 0!important;font-size:13px!important;line-height:1.5!important}
@media(min-width:641px) and (max-width:1024px){.si-home-style-classic_grid .latest-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important}.si-home-style-classic_grid .latest-copy{padding:13px!important}}
@media(max-width:640px){
 .si-home-style-classic_grid .latest-grid{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
 .si-home-style-classic_grid .latest-card{display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;align-items:center!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:12px 0!important;overflow:visible!important}
 .si-home-style-classic_grid .latest-image{grid-column:1!important;grid-row:1!important;aspect-ratio:1/1!important;border-radius:6px!important}
 .si-home-style-classic_grid .latest-copy{grid-column:2!important;grid-row:1!important;padding:8px 0 8px 12px!important}
 .si-home-style-classic_grid .latest-copy .eyebrow{font-size:9px!important;margin-bottom:4px!important}
 .si-home-style-classic_grid .latest-copy .latest-title{font-size:15px!important;line-height:1.25!important;margin-bottom:5px!important}
 .si-home-style-classic_grid .latest-copy .traditional-meta{font-size:10px!important;gap:3px 6px!important}
 .si-home-style-classic_grid .latest-copy .traditional-excerpt{display:none!important}
}
@media(max-width:380px){.si-home-style-classic_grid .latest-card{grid-template-columns:96px minmax(0,1fr)!important}.si-home-style-classic_grid .latest-copy{padding:8px 0 8px 10px!important}.si-home-style-classic_grid .latest-copy .latest-title{font-size:14px!important}}

/* Classic List: one predictable thumbnail/text row at desktop, tablet and mobile. */
.si-home-style-classic_list .latest-grid{display:flex!important;flex-direction:column!important;gap:0!important}
.si-home-style-classic_list .latest-card{display:grid!important;grid-template-columns:minmax(130px,210px) minmax(0,1fr)!important;gap:18px!important;align-items:center!important;padding:16px 0!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-width:0!important}
.si-home-style-classic_list .latest-image{display:block!important;position:relative!important;grid-column:1!important;grid-row:1!important;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:16/10!important;overflow:hidden!important;border-radius:7px!important}
.si-home-style-classic_list .latest-image>img,.si-home-style-classic_list .latest-image>.image-placeholder{width:100%!important;height:100%!important;object-fit:cover!important}
.si-home-style-classic_list .latest-image:after{display:none!important}
.si-home-style-classic_list .latest-copy{display:block!important;position:static!important;grid-column:2!important;grid-row:1!important;min-width:0!important;padding:0!important;color:var(--text)!important;background:transparent!important}
.si-home-style-classic_list .latest-copy .latest-title{position:static!important;display:block!important;margin:0 0 7px!important;padding:0!important;color:var(--text)!important;background:transparent!important;text-align:left!important;text-shadow:none!important;font-size:clamp(17px,1.5vw,21px)!important;line-height:1.28!important;overflow-wrap:anywhere!important}
.si-home-style-classic_list .latest-copy .latest-title a{color:inherit!important}
.si-home-style-classic_list .latest-copy .traditional-meta{display:flex!important;flex-wrap:wrap!important;gap:5px 8px!important;font-size:11px!important}
.si-home-style-classic_list .latest-copy .traditional-excerpt{margin:7px 0 0!important;font-size:13px!important;line-height:1.5!important}
@media(max-width:780px){.si-home-style-classic_list .latest-card{grid-template-columns:120px minmax(0,1fr)!important;gap:14px!important;padding:13px 0!important}.si-home-style-classic_list .latest-copy .latest-title{font-size:16px!important}.si-home-style-classic_list .latest-copy .traditional-excerpt{display:none!important}}
@media(max-width:420px){.si-home-style-classic_list .latest-card{grid-template-columns:96px minmax(0,1fr)!important;gap:11px!important;padding:11px 0!important}.si-home-style-classic_list .latest-copy .latest-title{font-size:14px!important;line-height:1.25!important;margin-bottom:5px!important}.si-home-style-classic_list .latest-copy .traditional-meta{font-size:10px!important;gap:3px 6px!important}}
.si-home-style-classic_grid .latest-image:after{display:none!important;content:none!important}

/* v2.10.76 — Respect the selected card presentation inside every homepage style.
   Earlier homepage-style rules forced all Latest Posts cards into a vertical stack,
   even when the user selected Traditional Listing. */
.si-homepage .latest-grid.si-home-cards--list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}
.si-homepage .latest-grid.si-home-cards--list > article.latest-card {
  display: grid !important;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}
.si-homepage .latest-grid.si-home-cards--list > article.latest-card:last-child { border-bottom: 0 !important; }
.si-homepage .latest-grid.si-home-cards--list > article.latest-card > .latest-image {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 10 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 7px !important;
  background: var(--surface-soft) !important;
}
.si-homepage .latest-grid.si-home-cards--list > article.latest-card > .latest-image img,
.si-homepage .latest-grid.si-home-cards--list > article.latest-card > .latest-image .image-placeholder {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}
.si-homepage .latest-grid.si-home-cards--list > article.latest-card > .latest-copy {
  display: block !important;
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: var(--text) !important;
  background: transparent !important;
  text-align: left !important;
}
.si-homepage .latest-grid.si-home-cards--list > article.latest-card .latest-title,
.si-homepage .latest-grid.si-home-cards--list > article.latest-card .latest-title a {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: var(--text) !important;
  background: transparent !important;
  text-align: left !important;
  text-shadow: none !important;
  font-size: clamp(16px, 1.5vw, 21px) !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere !important;
}
.si-homepage .latest-grid.si-home-cards--list > article.latest-card .traditional-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 8px !important;
  margin: 3px 0 5px !important;
  font-size: 11px !important;
}
.si-homepage .latest-grid.si-home-cards--list > article.latest-card .traditional-excerpt {
  display: block !important;
  margin: 5px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Classic Grid is a true responsive card grid, independent of the homepage shell style. */
.si-homepage .latest-grid.si-home-cards--grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 22px 16px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--line) !important;
  border-radius: 9px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow, 0 2px 10px rgba(0,0,0,.05)) !important;
}
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card > .latest-image {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card > .latest-image img,
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card > .latest-image .image-placeholder {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card > .latest-image:after { display: none !important; content: none !important; }
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card > .latest-copy,
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card > .latest-copy--overlay {
  display: block !important;
  position: static !important;
  inset: auto !important;
  flex: 1 1 auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 14px 15px 16px !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  text-align: left !important;
  overflow: visible !important;
}
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card .eyebrow { margin: 0 0 7px !important; }
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card .latest-title,
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card .latest-title a {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 7px !important;
  padding: 0 !important;
  color: var(--text) !important;
  background: transparent !important;
  text-align: left !important;
  text-shadow: none !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card .traditional-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 8px !important;
  margin: 0 !important;
  font-size: 11px !important;
}
.si-homepage .latest-grid.si-home-cards--grid > article.latest-card .traditional-excerpt { display: none !important; }

@media (min-width: 641px) and (max-width: 1024px) {
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card { grid-template-columns: minmax(145px, 30%) minmax(0, 1fr) !important; gap: 14px !important; }
  .si-homepage .latest-grid.si-home-cards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media (max-width: 640px) {
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card { grid-template-columns: 112px minmax(0, 1fr) !important; gap: 12px !important; padding: 12px 0 !important; }
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card > .latest-image { aspect-ratio: 1 / 1 !important; }
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card .latest-title { font-size: 15px !important; line-height: 1.27 !important; }
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card .traditional-meta { font-size: 10px !important; gap: 3px 6px !important; }
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card .traditional-excerpt { display: none !important; }
  .si-homepage .latest-grid.si-home-cards--grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .si-homepage .latest-grid.si-home-cards--grid > article.latest-card > .latest-image { aspect-ratio: 16 / 9 !important; }
}
@media (max-width: 380px) {
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card { grid-template-columns: 96px minmax(0, 1fr) !important; gap: 10px !important; }
  .si-homepage .latest-grid.si-home-cards--list > article.latest-card .latest-title { font-size: 14px !important; }
}