/* "News" page template (templates/news_template.php, the "Galleria" page in
   WordPress admin) — see inc/automania-news-page.php for the enqueue.

   Like page.php, this template's .container/.row/.col-sm-4/.col-xs-6 are
   leftover Bootstrap grid classes. Matches .am-fluid
   (automania-shared-sections.css) — the same max-width/padding wrapper
   every Home/About/Shop section uses — instead of Bootstrap's own
   defaults, so this template's width matches the rest of the site
   instead of rendering narrower. (The col-sm-4/col-xs-6 float grid
   itself is replaced further down — see the .row rule below.) */
.packages.home-section .container {
  margin: 0 auto;
  max-width: 1800px;
  padding-left: 60px;
  padding-right: 60px;
  width: 100%;
}

.packages.home-section {
  padding-bottom: var(--am-section-y);
  padding-top: var(--am-section-y);
}

/* The PHP template's row-wrapper <div class="row"> is commented out
   (templates/news_template.php), so all 14 .col-sm-4/.col-xs-6 cards
   float inside one continuous container instead of resetting every 3
   items — and confirmed live, .package_box heights vary a lot card to
   card (300-358px, since each one's description text is a different
   length), which is exactly the case pure CSS floats handle badly: an
   uneven-height card mid-grid throws off where later floats can wrap.
   Grid wraps into clean rows regardless of each item's own height, with
   no theme/content change needed.

   2 columns, not the original 3 — these list as horizontal
   thumbnail+text cards now (see .package_box below), which need more
   width per card than a stacked image-on-top card did. */
.packages.home-section .row {
  display: grid;
  gap: 32px 40px;
  grid-template-columns: repeat(2, 1fr);
}

.packages.home-section .row:before,
.packages.home-section .row:after {
  content: none;
  display: none;
}

.packages.home-section .col-sm-4,
.packages.home-section .col-xs-6 {
  float: none;
  padding: 0;
  width: 100%;
}

/* These are old scanned newspaper/magazine clippings — confirmed live,
   the actual uploaded files are ~100px on their longest side (e.g.
   100x68, 71x100), a WordPress-generated thumbnail size, not the
   original scan. Any box bigger than that stretches a 100px image up
   to fill it, which is the blur — no CSS fixes a source image that
   small. Redesigned around that instead of fighting it: a small fixed
   thumbnail next to the text (a "press mentions" list format) rather
   than a large hero-style image stretched across the full card width,
   which both suits real clipping thumbnails and keeps the upscale
   modest enough (100px source to 110px box) that it's barely
   noticeable instead of glaringly stretched. */
.package_box {
  align-items: flex-start;
  display: flex;
  gap: 20px;
}

.news-image {
  background-color: var(--am-gray-light);
  border-radius: 8px;
  flex: 0 0 110px;
  height: 110px;
  overflow: hidden;
  width: 110px;
}

.news-image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.image_text {
  min-width: 0;
}

/* .news-heading (an <h3>) and .news-p otherwise fall back to style_1.css's
   sitewide "h1,h2,h3,h4 { font-family:Fraunces; color:#333333;
   font-size:30px }" default and the browser's own default paragraph
   styling — confirmed live, neither had any dedicated rule anywhere in
   the theme. Scoped to these two classes specifically rather than
   touching the shared h1-h4 rule, so this doesn't affect any other page
   that also falls back to that same default. */
.news-heading {
  color: #111110;
  font-family: var(--am-font-heading);
  font-size: var(--am-h6-size);
  font-weight: 600;
  line-height: var(--am-h6-line-height);
  margin: 0 0 8px;
}

.news-p {
  color: rgba(0, 0, 0, .75);
  font-family: var(--am-font-body);
  font-size: 15px;
  line-height: 22px;
  margin: 0 0 6px;
}

.image_text .news-p:last-child {
  color: var(--am-muted);
  font-size: 14px;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .packages.home-section .container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .packages.home-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .packages.home-section .row {
    gap: 24px;
    grid-template-columns: 1fr;
  }

  .news-image {
    flex-basis: 90px;
    height: 90px;
    width: 90px;
  }
}