/*
Theme Name: Sierra Child
Theme URI: https://www.sierra.keydesign.xyz/
Description: Child theme for Sierra with reusable blog and archive layout overrides.
Author: Local Custom
Template: sierra
Version: 1.0.0
Text Domain: sierra-child
*/


/* =========================================================
   MAIN BLOG / ARCHIVE / SINGLE POST CONTAINER
   ========================================================= */

body.blog #content.site-content,
body.archive #content.site-content,
body.single-post #content.site-content {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--vertical-spacing) var(--column-spacing);
}


body.blog #content.site-content > #primary,
body.blog #content.site-content > #secondary,
body.archive #content.site-content > #primary,
body.archive #content.site-content > #secondary,
body.single-post #content.site-content > #primary,
body.single-post #content.site-content > #secondary {
  min-width: 0;
}


/* =========================================================
   BLOG / ARCHIVE
   MAIN CONTENT + SIDEBAR
   ========================================================= */

@media (min-width: 768px) {

  body.blog #content.site-content,
  body.archive #content.site-content {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, var(--sidebar-width, 25%));

    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }


  body.blog #content.site-content > #secondary,
  body.archive #content.site-content > #secondary {
    align-self: start;
  }
}


/* =========================================================
   SINGLE POST
   MAIN CONTENT + SIDEBAR
   ========================================================= */

@media (min-width: 1024px) {

  body.single-post #content.site-content {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, var(--sidebar-width, 25%));

    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }


  body.single-post #content.site-content > #secondary {
    align-self: start;
  }
}


/* =========================================================
   MOBILE PAGE SPACING
   ========================================================= */

@media (max-width: 767.98px) {

  body.blog #content.site-content,
  body.archive #content.site-content,
  body.single-post #content.site-content {
    padding-top: var(--mobile-spacing);
    padding-bottom: var(--mobile-spacing);
  }
}


/* =========================================================
   SINGLE POST TABLET SIDEBAR
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023.98px) {

  body.single-post #content.site-content > #secondary {
    margin-top: 40px;
  }
}


/* =========================================================
   BLOG / ARCHIVE CARDS
   TABLET + DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  body.blog #main > .keydesign-card,
  body.archive #main > .keydesign-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 36px;
  }


  /*
   * Featured image container.
   * Keeping width and aspect ratio identical creates
   * a consistent square thumbnail for every article.
   */
  body.blog #main > .keydesign-card .entry-image,
  body.archive #main > .keydesign-card .entry-image {
    flex: 0 0 280px;
    width: 280px;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
  }


  body.blog #main > .keydesign-card .entry-image > a,
  body.archive #main > .keydesign-card .entry-image > a {
    display: block;
    width: 100%;
    height: 100%;
  }


  /*
   * Crop landscape/portrait images into the square
   * instead of stretching or distorting them.
   */
  body.blog #main > .keydesign-card .entry-image img,
  body.archive #main > .keydesign-card .entry-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }


  /*
   * Article text column.
   */
  body.blog #main > .keydesign-card .entry-wrapper,
  body.archive #main > .keydesign-card .entry-wrapper {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }
}


/* =========================================================
   TABLET
   768px - 1023px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023.98px) {

  body.blog #main > .keydesign-card,
  body.archive #main > .keydesign-card {
    gap: 24px;
  }


  body.blog #main > .keydesign-card .entry-image,
  body.archive #main > .keydesign-card .entry-image {
    flex-basis: 210px;
    width: 210px;
  }


  body.blog #main > .keydesign-card .entry-wrapper .post-title,
  body.archive #main > .keydesign-card .entry-wrapper .post-title {
    font-size: 28px;
    line-height: 1.15;
  }
}


/* =========================================================
   SMALL / MEDIUM DESKTOP
   1024px - 1279px
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1279.98px) {

  body.blog #main > .keydesign-card,
  body.archive #main > .keydesign-card {
    gap: 32px;
  }


  body.blog #main > .keydesign-card .entry-image,
  body.archive #main > .keydesign-card .entry-image {
    flex-basis: 260px;
    width: 260px;
  }


  body.blog #main > .keydesign-card .entry-wrapper .post-title,
  body.archive #main > .keydesign-card .entry-wrapper .post-title {
    font-size: 36px;
    line-height: 1.12;
  }
}


/* =========================================================
   LARGE DESKTOP
   1280px+
   ========================================================= */

@media (min-width: 1280px) {

  body.blog #main > .keydesign-card,
  body.archive #main > .keydesign-card {
    gap: 40px;
  }


  body.blog #main > .keydesign-card .entry-image,
  body.archive #main > .keydesign-card .entry-image {
    flex-basis: 280px;
    width: 280px;
  }
}


/* =========================================================
   BLOG META + EXCERPT SPACING
   ========================================================= */

body.blog #main > .keydesign-card .entry-meta,
body.archive #main > .keydesign-card .entry-meta {
  margin-top: 10px;
}


body.blog #main > .keydesign-card .entry-content-card,
body.archive #main > .keydesign-card .entry-content-card {
  margin-top: 16px;
}


/* =========================================================
   MOBILE BLOG CARDS
   ========================================================= */

@media (max-width: 767.98px) {

  body.blog #main > .keydesign-card,
  body.archive #main > .keydesign-card {
    display: block;
  }


  /*
   * On mobile, a wide image is easier to read
   * than squeezing a square thumbnail beside the text.
   */
  body.blog #main > .keydesign-card .entry-image,
  body.archive #main > .keydesign-card .entry-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 24px 0;
    overflow: hidden;
  }


  body.blog #main > .keydesign-card .entry-image > a,
  body.archive #main > .keydesign-card .entry-image > a {
    display: block;
    width: 100%;
    height: 100%;
  }


  body.blog #main > .keydesign-card .entry-image img,
  body.archive #main > .keydesign-card .entry-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }


  body.blog #main > .keydesign-card .entry-wrapper,
  body.archive #main > .keydesign-card .entry-wrapper {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}