/* ==========================================================================
   Conquest Impex — small layout fixes layered on top of the original site.css
   (site.css itself is kept unchanged). Desktop rendering is not affected.
   ========================================================================== */

/* Partner wordmarks: groups of 7 left one logo alone on the last row on
   tablets (4 columns) and phones (2 columns). Let the last one fill the row. */
@media (max-width: 980px) {
  .technology-row:not(.technology-row--eight) > .technology-logo:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
@media (max-width: 580px) {
  .technology-row > .technology-logo:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Form feedback: success and error messages are distinguishable */
.form-status.is-success { color: var(--teal-dark); }
.form-status.is-error { color: #c0392b; }
.form-status.is-sending { color: var(--muted); }
.form-field.has-error label { color: #b42318; }
.form-field input.is-invalid,
.form-field select.is-invalid,
.form-field textarea.is-invalid { border-bottom-color: #d92d20; box-shadow: 0 1px 0 #d92d20; }
.field-error { display: block; margin-top: -3px; color: #b42318; font-size: .76rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; text-transform: none; }
.form-field input.is-invalid:focus,
.form-field select.is-invalid:focus,
.form-field textarea.is-invalid:focus { outline: 2px solid rgba(217,45,32,.16); outline-offset: 3px; }

/* Tablet 2-column grids (blog/news cards, photo albums, videos, sitemap):
   an odd last card left half a row empty. It now fills the row. */
@media (min-width: 581px) and (max-width: 980px) {
  /* Blog / news: wide card with the image on the left */
  .content-card-grid > .content-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
    padding-bottom: 0;
  }
  .content-card-grid > .content-card:last-child:nth-child(odd) > .content-card__image {
    grid-column: 1; grid-row: 1 / -1; height: auto; min-height: 300px; margin-bottom: 0;
  }
  .content-card-grid > .content-card:last-child:nth-child(odd) > :not(.content-card__image) { grid-column: 2; margin-left: 28px; margin-right: 28px; }
  .content-card-grid > .content-card:last-child:nth-child(odd) > .content-meta { margin-top: 30px; }
  .content-card-grid > .content-card:last-child:nth-child(odd) > .text-link { margin-bottom: 30px; }

  /* Photo albums: wide cover */
  .album-grid > .album-card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 380px; }

  /* Videos: wide card with the thumbnail on the left */
  .video-grid > .video-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 30px;
  }
  .video-grid > .video-card:last-child:nth-child(odd) > .video-card__media { grid-column: 1; grid-row: 1 / -1; }
  .video-grid > .video-card:last-child:nth-child(odd) > .content-meta { grid-column: 2; grid-row: 2; margin-top: 0; }
  .video-grid > .video-card:last-child:nth-child(odd) > h2 { grid-column: 2; grid-row: 3; margin-top: 12px; }
}
@media (min-width: 581px) and (max-width: 900px) {
  /* Sitemap: last column spans the row, its links flow into two columns */
  .sitemap-grid > section:last-child:nth-child(odd) {
    grid-column: 1 / -1; min-height: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start;
  }
  .sitemap-grid > section:last-child:nth-child(odd) > span,
  .sitemap-grid > section:last-child:nth-child(odd) > h2 { grid-column: 1 / -1; }
}

/* Product catalogue (tablet 2 columns): the odd last visible card becomes a wide
   card with the image on the left. The class is set by js/site-fixes.js because the
   brand filter hides cards. */
@media (min-width: 641px) and (max-width: 980px) {
  .catalogue-grid > .catalogue-card--wide { grid-column: 1 / -1; }
  .catalogue-grid > .catalogue-card--wide > a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .catalogue-grid > .catalogue-card--wide .catalogue-card__media { height: auto; min-height: 300px; }
  .catalogue-grid > .catalogue-card--wide .catalogue-card__copy { display: flex; flex-direction: column; justify-content: center; }
}

/* The design is light-only: stop browsers (Chrome/Samsung "auto dark mode")
   from inverting it — logos, maps and product cut-outs break when inverted. */
:root { color-scheme: only light; }

/* Phones in landscape (short screens): heroes had fixed 460–740px heights with the
   text at the bottom, so the first screen showed only the image/breadcrumb.
   Size them to the screen and keep the headline in view. */
@media (orientation: landscape) and (max-height: 520px) {
  :root .page-hero.page-hero { min-height: calc(100svh - 68px); }
  :root .page-hero .page-hero__content { padding-top: 28px; padding-bottom: 28px; }
  :root .page-hero h1 { font-size: clamp(2.2rem, 6vw, 3rem); }
  :root .page-hero .page-hero__lead { margin-top: 14px; font-size: .95rem; line-height: 1.6; }
  :root .page-hero .eyebrow { margin-bottom: 12px; }
  :root .page-hero .breadcrumb { margin-bottom: 12px; }

  :root .hero .hero-content { min-height: calc(100svh - 68px); padding-block: 26px 84px; align-items: center; }
  :root .hero h1, :root .hero h2 { font-size: clamp(30px, 5.4vw, 42px); line-height: 1.05; }
  :root .hero .eyebrow { margin-bottom: 14px; }
  :root .hero .hero-copy { margin-top: 14px; font-size: 15px; line-height: 1.55; max-width: 520px; }
  :root .hero .hero-actions { margin-top: 18px; flex-direction: row; align-items: center; }
  :root .hero .scroll-cue { display: none; }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* Mobile menu: tighter rows so more of the menu fits the short screen */
  .mobile-nav { padding-top: 8px; padding-bottom: 24px; }
  .mobile-nav > a, .mobile-nav summary { padding-top: 11px; padding-bottom: 11px; font-size: 17px; }
  .mobile-nav details a { padding-top: 8px; padding-bottom: 8px; }

  /* Video player: size the 16:9 frame to the screen height so the whole video
     (and its controls) is visible without scrolling the dialog */
  .video-dialog { width: min(calc(100% - 24px), calc((100svh - 80px) * 16 / 9)); max-height: calc(100svh - 16px); }
  .video-dialog__top { padding: 8px 14px; }
  .video-dialog__top button { width: 32px; height: 32px; }
}