/* ==========================================================================
   REGIONS & GENERAL
   ========================================================================== */

.region-top-content:has(#block-news-center-page-title) {
  display: none;
}

.region-content {
  margin-bottom: var(--gap);
}

.region-front-content {
  flex-wrap: wrap;
}

/* Center the content of non-section blocks in the front-page main region
   (e.g. Special Sections widget, Business Directory e-edition). Section
   blocks are excluded — they have their own grid layout. */
.region-front-content > .block:not(:has(.front-page-sections)) {
  text-align: center;
}

.section-tag-heading {
  text-align: left;
}

/* The shared .section-tag-heading carries a left margin elsewhere; clear it
   so the widget heading centers with the rest of the content. */
.region-front-content > .block:not(:has(.front-page-sections)) .section-tag-heading {
  margin-left: 0;
}

/* The front-page widget embeds (Special Sections, Business Directory
   e-edition) are cross-origin iframes hard-coded to height=450, but their
   carousels are shorter, leaving blank space inside the iframe (the publisher
   page's own background) that we can't reach. Size the iframe element itself
   so the card hugs the carousel. Each embed has its own carousel height. */
#block-tiempos-specialsectionswidget iframe {
  height: 360px;
}

#block-tiempos-businessdirectoryeedition iframe {
  height: 260px;
}

.view-footer {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   FRONTPAGE MAIN GRID
   ========================================================================== */

.frontpage {
  display: grid;
  grid-template-columns: 30% 1fr;
  grid-column-gap: var(--gap);
}

.frontpage .views-field-field-image img {
  width: 100%;
}

/* ==========================================================================
   FRONTPAGE VIEW - SHARED
   ========================================================================== */

.view-id-frontpage {
  margin-bottom: var(--gap);
}

.view-id-frontpage .view-content > div {
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: var(--gap);
  width: 100%; /* mostly for mobile where the image might be too small to push the div to full width */
}

/* Featured only - no attachment (use page display to avoid matching nested attachment view) */
.view-id-frontpage.view-display-id-page_1:not(:has(.attachment)) .view-content article .node__content {
  padding: var(--gap);
}

/* With attachment - add padding to content items */
.view-id-frontpage:has(.attachment) .view-content > div {
  padding: var(--section-padding);
}

.view-id-frontpage:has(.attachment) .view-content > div:first-child .views-field-field-image {
  padding: 0.5rem 0 0;
}

/* ==========================================================================
   FRONTPAGE VIEW - FEATURED (FIRST ITEM)
   ========================================================================== */

.view-id-frontpage .node--type-article.node--view-mode-featured .node__content {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.5rem;
}

.view-id-frontpage .view-content > div:first-child .premium_content_teaser {
  width: 250px;
  margin: 0.6rem 0;
}

.view-id-frontpage.view-display-id-page_1 .node--view-mode-featured .image-container img {
  display: block;
  margin: auto;
  width: 100%;
}

/* ==========================================================================
   FRONTPAGE VIEW - ATTACHMENT
   ========================================================================== */

.view-id-frontpage .attachment .views-row {
  clear: both;
  margin-bottom: var(--gap);
  width: 100%;
}

.frontpage .attachment .views-row:last-child {
  margin-bottom: 0;
}

.view-id-frontpage .attachment .content-container {
  margin-top: 0.3rem;
}

.view-id-frontpage .attachment .image-container a {
  display: block;
  width: 100%;
  height: 100%;
}

.view-id-frontpage .attachment .image-container .caption {
  display: none;
}

.view-id-frontpage .attachment .image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   FRONTPAGE VIEW - COLUMNS LAYOUT
   ========================================================================== */

/* Left-hand column (attachment) */
.view-id-frontpage.columns > .attachment {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  padding: 0 calc(0.75rem * 2) 0 0;
}

.view-id-frontpage.columns > .attachment .view-content > div {
  clear: both;
}

.view-id-frontpage.columns > .attachment .view-content h2 {
  font-size: 1.1rem;
  line-height: 1.4rem;
}

.view-id-frontpage.columns > .attachment .view-content .node--view-mode-teaser {
  margin-bottom: 0;
}

.view-id-frontpage.columns > .attachment .view-content .node--view-mode-teaser h2 {
  font-size: 1.1rem;
  line-height: 1.4rem;
}

.view-id-frontpage.columns > .attachment .view-content .node--view-mode-teaser .field--name-body {
  margin-bottom: 0;
  line-height: 1.3rem;
}

.view-id-frontpage.columns > .attachment .view-content .node--view-mode-teaser .field--name-body p {
  line-height: 1.3rem;
}

/* Center column (featured content) */
.view-id-frontpage.columns > .view-content {
  display: flex;
  flex: 2 1 0;
  flex-wrap: wrap;
  padding: 0;
  height: fit-content;
}

.view-id-frontpage.columns > .view-content > div > a,
.view-id-frontpage.columns > .view-content .views-field-field-image a {
  margin: auto;
  display: table;
}

.view-id-frontpage.columns > .view-content h2 {
  line-height: 1.8rem;
}

.view-id-frontpage.columns > .view-content .node--view-mode-featured .field--name-body {
  margin-bottom: 0;
}

/* ==========================================================================
   FRONT PAGE SECTIONS
   ========================================================================== */

.front-page-sections .view-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: var(--gap);
}

.front-page-sections footer {
  margin: var(--gap) 0 0 !important;
  grid-column-start: 1;
  grid-column-end: 4;
  display: flex;
  justify-content: center;
}

.front-page-sections h2.field-content {
  font-size: 1.1rem;
  line-height: 1.4rem;
}

/* Center the image in its container in ALL states (works whether or not the
   front_page_sections JS/CSS is loaded). The equalized-height layout, radius
   and vignette live in front_page_sections.css, loaded only when the "Enable
   front page sections Javascript" setting is on. */
.front-page-sections .image-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media screen and (min-width: 1024px) {
  /* Card style for every block in the front-page main region — applied at
     the block level (the outer .block), so the card wraps the whole block
     including its heading, and no inner div carries its own shadow/border.
     Uses the card vars, so it follows the card-shadows theme setting. */
  .region-front-content > .block {
    box-shadow: var(--card-shadow);
    border: var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    padding: var(--section-padding);
    margin-bottom: var(--section-margin-bottom);
  }
}

@media screen and (max-width: 1023px) {

  /* ======================================================================
     1. GENERAL SELECTORS & TAGS
     ====================================================================== */

  /* Base top padding for every non-featured teaser (attachment + section
     stories). Per-context overrides live in their own blocks below. */
  .node--type-article:not(.node--view-mode-featured) {
    padding-top: 0.5rem;
  }

  .section-tag-heading {
    /* Flush left and larger on mobile so the section banner reads as a
       heading rather than a caption. */
    margin-left: 0;
    font-size: 1.25rem;
  }

  /* ======================================================================
     2. FRONTPAGE VIEW & BLOCK
     ====================================================================== */

  .frontpage {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
  }

  .frontpage .attachment {
    margin-top: var(--gap);
    margin-right: 0;
    display: flex;
    flex-wrap: wrap;
  }

  /* Drop the desktop columns-layout right gutter (24px) on the page display's
     attachment wrapper. On desktop it separates the attachment column from the
     center column; once the layout stacks on mobile it just insets the lead
     stories 24px on the right, so they no longer line up with the featured and
     section stories. Reset it so every front-page row sits flush. */
  .view-id-frontpage.columns > .attachment {
    padding-right: 0;
  }

  .view-id-frontpage:has(.attachment) {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
  }

  #block-tiempos-content,
  .view-id-frontpage {
    margin-bottom: 0;
  }

  /* .view to override margin-bottom from style.css */
  .view-id-frontpage.view .view-content > div {
    box-shadow: none;
    border: 0;
    border-radius: unset;
    overflow: hidden;
    margin-bottom: 0 !important;
  }

  .view-id-frontpage.view-display-id-page_1:not(:has(.attachment)) .view-content article .node__content {
    padding: 0;
  }

  /* With attachment - remove padding from content items */
  .view-id-frontpage:has(.attachment) .view-content > div {
    padding: 0;
  }

  /* Featured (first item) */
  .view-id-frontpage .view-content > div:first-child .premium_content_teaser {
    width: 100%;
    margin: 0 0 0.5rem;
  }

  .view-id-frontpage:has(.attachment) .view-content > div:first-child .views-field-field-image {
    padding: 0;
  }

  /* Hairline under each top story. (The line under the masthead lives in
     style.css so it applies on every page, not just the front page.) The
     top stories span two displays — the featured article (its own
     view-content row) and the attachment teasers (a nested view) — so border
     every article row rather than relying on :last-child, which only saw the
     nested teasers. */
  #block-tiempos-content .view-content > div:has(> article.node--type-article),
  #block-tiemposcni-content .view-content > div:has(> article.node--type-article),
  #block-tiemposcni-content .view-content > div.splide:has(article.node--type-article) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* Matches the .node--view-mode-featured exclusion's padding-top: 0.5rem so
       each story has symmetric breathing room above the content and below it
       (before the hairline). */
    padding-bottom: 0.5rem;
    /* Gap after the line so the hairline sits in whitespace rather than
       flush against the next story's image (where it disappears).
       !important overrides the mobile margin-bottom: 0 reset above. */
    margin-bottom: 1rem !important;
  }

  /* Content-column padding — frontpage items, and the front-page-section
     items when their image is on top (the on-side layout pads via the grid
     column-gap instead). */
  .view-id-frontpage .view-content > div .content-container,
  .sections-image-top .front-page-sections .view-content > div .content-container {
    padding: 0 0.5rem;
  }

  /* ======================================================================
     3. FRONTPAGE ATTACHMENT (lead stories 2–4)
     ====================================================================== */

  /* ---- Image on side (default): small UNCROPPED thumbnail beside the copy.
     A full-width center crop risked cutting faces off (obituary headshots,
     sports), so the image keeps its natural ratio at thumbnail size. The
     `.node__content .image-container` selectors outrank the base attachment
     rules (which set the image full-width with object-fit: cover). -------- */

  .view-id-frontpage .attachment .node__content:has(.image-container) {
    display: grid;
    grid-template-columns: max(120px, 42vw) 1fr;
    column-gap: 0.85rem;
    align-items: start;
  }

  .view-id-frontpage .attachment .node__content > .image-container {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 0 0.5rem;
  }

  .view-id-frontpage .attachment .node__content > .content-container,
  .view-id-frontpage .attachment .node__content > .premium_content_teaser {
    grid-column: 2;
  }

  .view-id-frontpage .attachment .node__content .image-container a {
    display: block;
    width: 100%;
    height: auto;
  }

  .view-id-frontpage .attachment .node__content .image-container img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: fill;
  }

  /* ---- Image on top: theme setting "Attachment stories image position:
     on top" — body.attachment-image-top added by TiemposHooks. Collapse the
     thumbnail grid to a single column so the (natural-ratio, uncropped) image
     stacks above the copy. ----------------------------------------------- */

  body.attachment-image-top .view-id-frontpage .attachment .node__content:has(.image-container) {
    grid-template-columns: 1fr;
  }

  body.attachment-image-top .view-id-frontpage .attachment .node__content > .content-container,
  body.attachment-image-top .view-id-frontpage .attachment .node__content > .premium_content_teaser {
    grid-column: 1;
  }

  body.attachment-image-top .view-id-frontpage .attachment article .node__content .premium_content_teaser {
    margin: 0.3rem 0;
  }

  body:not(.attachment-image-top) .view-id-frontpage .attachment article .node__content .premium_content_teaser {
    margin: 0 0 0.3rem;
  }

  body:not(.attachment-image-top) .view-id-frontpage .attachment .content-container {
    margin-top: 0;
  }

  /* ======================================================================
     4. FRONT PAGE SECTIONS (NEWS, SPORTS, …)
     ====================================================================== */

  /* ---- Base: one section per row, shared by both image positions. ------ */

  .front-page-sections {
    grid-template-columns: 1fr;
  }

  /* Compact thumbnail grid (image | copy). node__content is a 2-column grid;
     the premium "Exclusive Subscriber Content" badge is pinned to the copy
     column so it never lands under the image. Grid sizing overrides the
     theme's `.view-content > div div { flex: 1 1 100% }` framework on these
     items. The on-top setting (below) collapses this to a single column. */
  .front-page-sections .view-content > div .node__content:has(.image-container) {
    display: grid;
    grid-template-columns: max(120px, 42vw) 1fr;
    column-gap: 0.85rem;
    align-items: start;
  }

  .front-page-sections .view-content > div .node__content > .content-container,
  .front-page-sections .view-content > div .node__content > .premium_content_teaser {
    grid-column: 2;
  }

  .front-page-sections .image-container a {
    display: block;
    width: 100%;
  }

  .front-page-sections .image-container img,
  .front-page-sections .image-container a img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: fill;
    /* Block-level so the image doesn't sit on the text baseline — otherwise
       the line box reserves descender space below it, leaving a few px gap
       under the image (visible on the beside Obituaries/Opinion thumbnails). */
    display: block;
  }

  .front-page-sections .image-container .caption {
    display: none;
  }

  .front-page-sections .views-row {
    margin-bottom: var(--gap);
  }

  /* Single-column on mobile runs stories together; a hairline rule between
     them gives very subtle separation without reading as a hard divider.
     Skip the last row so the section doesn't close on a line. */
  .front-page-sections .views-row:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .front-page-sections footer {
    grid-column-end: 1;
  }

  .sections-image-top .front-page-sections article .node__content .premium_content_teaser {
    margin: 0 0 0.3rem;
  }

  .front-page-sections .view-content > div .premium_content_teaser {
    display: block;
  }

  .front-page-sections .view-content > div .premium_content_teaser img {
    width: min(100%, 250px);
  }

  [id^='block-views-block-front-page-sections'] .section-tag-heading {
    padding-bottom: 0;
    margin-bottom: 0;
    margin-left: 0.5rem;
  }

  /* ---- Image on side (default): thumbnail beside the copy. -------------- */

  .front-page-sections .view-content > div .node__content > .image-container {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  body:not(.sections-image-top) .front-page-sections .node--type-article:not(.node--view-mode-featured) {
    padding-top: 0;
  }

  /* Row padding for the side layout. The second selector covers the
     image-beside wrinkle below (sections that force beside even when the
     site-wide setting is "on top" still get the side row padding). */
  body:not(.sections-image-top) .front-page-sections .views-row,
  body.sections-image-top .front-page-sections.image-beside .views-row {
    padding: 0.5rem;
  }

  /* ---- Image on top: theme setting "Front page section stories image
     position: on top" — body.sections-image-top added by TiemposHooks.
     Collapse the thumbnail grid to a single column so the image stacks above
     the copy. The :not(.image-beside) guard leaves the beside-only sections
     (Obituaries, Opinion — smaller photos) in the side layout. ----------- */

  .sections-image-top .front-page-sections .view-content > div .node__content > .image-container {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  body.sections-image-top .front-page-sections:not(.image-beside) .view-content > div .node__content:has(.image-container) {
    grid-template-columns: 1fr;
  }

  body.sections-image-top .front-page-sections:not(.image-beside) .view-content > div .node__content > .content-container,
  body.sections-image-top .front-page-sections:not(.image-beside) .view-content > div .node__content > .premium_content_teaser {
    grid-column: 1;
  }

  .sections-image-top .front-page-sections .node--type-article:not(.node--view-mode-featured):has(.image-container) {
    padding-top: 0;
  }

  /* Equal bottom padding on every image-on-top story (with or without an
     image) so they all sit the same distance off the hairline — mirrors the
     0.5rem top padding. Excludes .image-beside sections (Obituaries, Opinion),
     which already get their bottom gap from the .views-row 0.4rem padding. */
  body.sections-image-top .front-page-sections:not(.image-beside) .node--type-article:not(.node--view-mode-featured) {
    padding-bottom: 0.5rem;
  }

  body.sections-image-top [id^='block-views-block-front-page-sections'] .section-tag-heading {
    padding-bottom: 0.3rem;
    margin-bottom: 0.3rem;
    margin-left: 0.5em;
  }

  /* ---- .image-beside overrides the on-top setting: sections flagged
     .image-beside keep their photo to the side even when the site is set to
     image-on-top (used where photos are small — Obituaries, Opinion). ----- */

  body.sections-image-top .front-page-sections.image-beside .view-content > div .node__content > .image-container {
    margin: 0;
  }

  /* Drop the on-top heading spacing (0.3rem padding + margin, set above) on
     beside sections. Their first row also carries .views-row padding, so the
     0.3rem compounds and the gap below the heading reads larger than on the
     image-on-top sections (NEWS etc.). The :has() looks forward to the
     following wrapper's .front-page-sections.image-beside to scope it. */
  body.sections-image-top [id^='block-views-block-front-page-sections'] .section-tag-heading:has(+ div .front-page-sections.image-beside) {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  body.sections-image-top .front-page-sections:not(.image-beside) .view-content > div:has(.image-container) .content-container{
    padding: 0.5rem 0.5rem 0;
  }

  /* ======================================================================
     5. ANYTHING ELSE
     ====================================================================== */

  .view-special-sections img {
    width: min(100%, 350px);
  }

  #block-mostrecentpoll {
    display: block;
    text-align: left;
  }

  .blazy .grid__content,
  .blazy .region__content {
    text-align: center;
  }
}