/* ==========================================================================
   Denestar Studios - responsive fixes
   Load this file AFTER css/main.css. It overrides main.css and leaves that
   file untouched, so it can be removed to return to the previous behaviour.

   Sections
     1. All widths      - equal-height news cards
     2. Up to 960px     - World / Story / Gameplay rows stack; news in one column
     3. Up to 768px     - phone layout for every section
     4. Up to 359px     - very narrow phones: two-row navigation
   ========================================================================== */


/* 1. All widths ----------------------------------------------------------- */

/* News cards share one height regardless of how long each headline runs. */
.container.section_dark .container.sd-three-cols > .container {
  display: -webkit-box;
  display: -webkit-flex;
  display:         flex;
}

.container.section_dark .container.sd-three-cols > .container > p.paragraph.region_paragraph_news {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
}


/* 2. Up to 960px ---------------------------------------------------------- */

@media screen and (max-width: 60rem) {

  /* World / Story / Gameplay: picture on top, text panel underneath.
     To put the text first, delete the "order" lines below. */
  .container.brochure_layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
            flex-direction: column;
    padding: 1rem 1rem .25rem;
  }

  .container.col_brochure_right {
    display: block;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
            order: 0;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  .container.col_brochure_left {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
            order: 1;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
    padding: 1.25rem 1.25rem 1.5rem;
  }

  /* The three pictures were sized three different ways; give them one rule. */
  .container.col_brochure_right > div.responsive-picture,
  .container.col_brochure_right > div.responsive-picture > picture,
  .container.col_brochure_right > div.responsive-picture > picture > img {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  h1.heading-thirds {
    margin: 0 0 .5rem;
    font-size: 1.75rem;
    line-height: 1.2;
  }

  p.paragraph.paragraph-thirds {
    margin: 0;
    padding: 0;
    max-width: 40rem;
    font-size: 16px;
    line-height: 1.6;
  }

  /* Two-column text bands (Game, Opportunity, Contact): narrower side
     margins so each column keeps a readable width on tablets. */
  p.paragraph.region_paragaph_light {
    margin-right: 1.5rem;
    margin-left: 1.5rem;
  }

  /* News: one centred column of cards. */
  .container.section_dark {
    padding: 1rem;
  }

  .container.section_dark .container.sd-three-cols {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    padding-right: 0;
    padding-left: 0;
    max-width: 40rem;
    width: 100%;

    grid-template-columns: 1fr;
    grid-row-gap: 1rem;
  }

  p.paragraph.region_paragraph_news {
    margin: 0;
    padding: 1.5rem;
    min-height: 0;
    max-width: none;
    font-size: 16px;
    line-height: 1.6;
  }
}


/* 3. Up to 768px ---------------------------------------------------------- */

@media screen and (max-width: 48rem) {

  /* --- Navigation: one centred row that sits above the logo --- */
  .container.nav-bar {
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    padding: 12px 8px 0;
  }

  .container.nav-link-wrapper {
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
    margin-top: 0;
    max-width: 26rem;
    width: 100%;
  }

  a.link-text.nav-link {
    padding: 12px 6px;
    font-size: 13px;
  }

  /* --- Hero --- */
  .container.space-hero-section {
    padding-top: 4.5rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    background-position: center top;
  }

  .container.centered {
    -webkit-align-self: stretch;
            align-self: stretch;
    padding: 0 0 1.5rem;
  }

  div.responsive-picture.picture-1 {
    margin: 0 auto 1rem;
    max-width: min(30rem, 78%);
    width: 100%;
  }

  h1.space-hero-header-02-1 {
    margin: .5rem 0;
    font-size: clamp(2rem, 9.5vw, 2.75rem);
    line-height: 1.1;
  }

  p.paragraph.sapce-hero-header {
    margin: 1rem auto;
    max-width: 34rem;
    line-height: 1.45;
  }

  /* --- Section title bars --- */
  .container.highlight-section {
    padding: 1.5rem 1rem;
    min-height: 0;
  }

  h2.title-message {
    margin-top: 0;
    font-size: 2.25rem;
    line-height: 1.15;
  }

  /* --- Game title card: full width, original proportions --- */
  .container.feature_region_light {
    padding: 1rem;
  }

  .container.cotent_feature_light {
    display: block;
    padding: 0;
    width: 100%;
  }

  .container.cotent_feature_light > .container.container-2 {
    padding: 0;
  }

  div.responsive-picture.picture-2 {
    margin: 0 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  div.responsive-picture.picture-2 > picture,
  div.responsive-picture.picture-2 > picture > img {
    height: auto;
  }

  /* --- Text bands: Game, Studio, Opportunity, News intro, Contact --- */
  .container.feature-region {
    padding: 1.5rem 1.25rem;
  }

  .container.feature-regon-dark {
    padding: 1.5rem 1.25rem;
    background-color: #666;
  }

  .container.content-feature {
    display: block;
    padding: 0;
    max-width: 40rem;
    width: 100%;
    background-color: transparent;
  }

  .container.content-feature > .container,
  .container.content-feature > .container.container-2 {
    padding: 0;
  }

  .container.content-feature > .container + .container {
    margin-top: 1.25rem;
  }

  p.paragraph.region_paragaph_light,
  p.paragraph.space-hero-paragraph {
    margin: 0;
    max-width: 40rem;
    font-size: 16px;
    line-height: 1.6;
  }

  /* --- Contact button --- */
  a.link-button.action-btn {
    margin-top: 1.5rem;
    max-width: 16rem;
  }

  /* --- Footer: centred stack with finger-sized social icons --- */
  .container.feature-region.footer-content-section {
    padding: 2rem 1.25rem;
  }

  .container.feature-region.footer-content-section > .container.sd-two-cols {
    padding: 0;
    width: 100%;
    text-align: center;

    grid-template-columns: 1fr;
    grid-row-gap: 1.5rem;
    justify-items: center;
  }

  h4.footer-heading {
    margin: 0 0 1rem;
  }

  .container.container-3 {
    display: -webkit-box;
    display: -webkit-flex;
    display:         flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    padding: 0;
    max-width: none;

    gap: 1.25rem;
  }

  .container.container-4 {
    display: none;
  }

  a.responsive-picture.social_media_picture_01,
  a.responsive-picture.social_media_picture_02,
  a.responsive-picture.social_media_picture_04 {
    max-width: none;
    width: 2.75rem;
  }

  a.responsive-picture.logo_tiny {
    margin: 0 auto;
    max-width: none;
    width: 8rem;
  }
}


/* 4. Up to 359px ---------------------------------------------------------- */

@media screen and (max-width: 22.4375rem) {

  /* Six links no longer fit on one line; show two tidy rows of three. */
  .container.nav-link-wrapper {
    display: grid;
    text-align: center;

    grid-template-columns: repeat(3, auto);
    grid-column-gap: .75rem;
  }

  a.link-text.nav-link {
    padding: 8px 6px;
  }

  .container.space-hero-section {
    padding-top: 6rem;
  }
}