/* ==========================================================================
   bdfsun: tablet and desktop layout
   --------------------------------------------------------------------------
   This file is linked with media="(min-width: 769px)", and every rule is
   also wrapped in the same query, so phones (<= 768px) never apply it and
   the mobile design in style.css stays exactly as it was.

   The mobile CSS sizes nearly everything in vw/vh (99.9vw images, 80-85vw
   buttons), which stretches across a desktop screen. Here every screen is
   placed in a centred column, the vw sizes become container-relative, and
   tiles, buttons, galleries and partner logos are laid out in grids. Images
   are capped near their native 780-1000px width, so they never upscale.
   ========================================================================== */

@media (min-width: 769px) {

   :root {
      --bd-max: 1120px;          /* content column */
      --bd-gutter: 32px;
      --bd-media: 780px;         /* native width of most photos */
      --bd-text: 760px;          /* comfortable line length */
      --bd-bar: 120px;           /* logo bar height */
      --bd-bar-scrolled: 72px;
      --bd-shop: 64px;           /* bottom "Sunflower Shop" bar */
      --bd-radius: 16px;
      --bd-yellow: #FEC21F;      /* edge colour of the header artwork */
      --bd-gold: #FFC630;
      --bd-brown: #4F2C00;
      --bd-shadow: 0 3pt 6pt #00000029;
      --bd-shadow-hover: 0 10px 24px #00000033;
   }

   /* ---- page frame ------------------------------------------------------ */

   .static_and_immovable,
   .changeable_content {
      /* the faded sunflower sits in the lower-left corner instead of being
         blown up across the full viewport width */
      background-size: auto min(80vh, 760px);
      background-position: left bottom;
   }

   .changeable_content {
      margin-top: calc(var(--bd-bar) + 32px);
   }

   .changeable_content > div {
      box-sizing: border-box;
      width: 100%;
      max-width: var(--bd-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--bd-gutter);
      padding-right: var(--bd-gutter);
   }

   /* ---- logo bar --------------------------------------------------------- */

   .sunflower_logo_bar {
      box-sizing: border-box;
      width: 100%;
      right: 0;
      height: var(--bd-bar);
      padding: 0;
      --logo-w: calc(var(--bd-bar) * 780 / 236);
      background-color: var(--bd-yellow);
      background-size: auto 100%;
      background-position: center top;
      transition: height .25s ease;
   }

   /* on_scroll.js adds .is-scrolled together with the slim header artwork */
   .sunflower_logo_bar.is-scrolled {
      height: var(--bd-bar-scrolled);
      --logo-w: calc(var(--bd-bar-scrolled) * 780 / 112);
   }

   /* blend the edges of the textured artwork into the flat yellow fill */
   .sunflower_logo_bar::before,
   .sunflower_logo_bar::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 48px;
      pointer-events: none;
   }
   .sunflower_logo_bar::before {
      left: calc(50% - var(--logo-w) / 2);
      background: linear-gradient(to right, var(--bd-yellow), rgba(254, 194, 31, 0));
   }
   .sunflower_logo_bar::after {
      right: calc(50% - var(--logo-w) / 2);
      background: linear-gradient(to left, var(--bd-yellow), rgba(254, 194, 31, 0));
   }

   /* the back button is fixed inside the (transformed) bar, so it is
      positioned relative to the bar and follows its height */
   .daBackButton {
      left: max(24px, calc((100vw - var(--bd-max)) / 2 + 8px));
      top: calc(50% - 20px);
      z-index: 1;
      cursor: pointer;
   }
   .daBackButton img {
      width: 40px;
      height: 40px;
      transition: transform .15s ease;
   }

   /* ---- bottom "Sunflower Shop" bar -------------------------------------- */

   .shop_sticky {
      width: 100%;
      left: 0;
      height: var(--bd-shop);
   }
   .shop_background {
      box-sizing: border-box;
      width: 100%;
      max-width: var(--bd-max);
      margin: 0 auto;
      padding: 0 var(--bd-gutter);
      background-position: var(--bd-gutter) center;
      grid-auto-flow: column;
      justify-content: center;
      align-items: center;
      column-gap: 12px;
   }
   .sunflower_shop {
      width: auto;
      height: 44px;
      padding: 0 28px;
      margin-top: 0 !important;  /* JS sets a vh-based nudge for phones */
      border-radius: 22px;
      font-size: 1.25rem;
      cursor: pointer;
      transition: background-color .15s ease, box-shadow .15s ease;
   }
   .shop_camera {
      position: static;
      height: 36px;
      width: auto;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      position: relative;         /* anchors the file input; offsets from style.css reset */
      left: auto;
      top: auto;
      overflow: hidden;
   }
   .shop_camera_img {
      display: block;
      height: 100%;
      width: auto;
      pointer-events: none;
   }

   /* ---- shared typography ------------------------------------------------ */

   .title_bar, .os_title, .vs_title, .pt_title, .com_title, .i_title,
   .ed_title, .wend_title, #sf_map_title, #of_title, #in_title, #ed_title,
   #wday_title {
      font-size: 36px;
   }

   .title_bar, .os_title, .vs_title, .pt_title, .com_title, .i_title,
   .ed_title, .wend_title, #sf_map_title {
      box-sizing: border-box;
      justify-self: center;
      width: auto;
      min-width: min(50%, 520px);
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      padding: 0 24px 6px;
      white-space: normal;
   }

   #sf_description, #of_description, #in_description, #ed_description,
   #ed_text_one, #ed_text_two, #ed_text_three, #wday_description,
   .wday_subtext, .wend_text, .ws_text, .os_text, .vs_description,
   .snd_desc_in, .ed_p, .com_text, .pt_text {
      box-sizing: border-box;
      max-width: var(--bd-text);
      margin-left: auto;
      margin-right: auto;
      padding-left: 0;
      padding-right: 0;
      font-size: 18px;
      line-height: 1.65;
   }

   /* ---- shared media ----------------------------------------------------- */

   .of_photo > img, .snd_img_in, .pt_img, .vs_img > img, .ed_img > img,
   img.os_img, .wday_image_container > img, .com_img > img,
   .sf_map_images > div > img, .fullmap {
      display: block;
      width: 100%;
      max-width: var(--bd-media);
      height: auto;
      margin-left: auto;
      margin-right: auto;
      border-radius: var(--bd-radius);
      box-shadow: var(--bd-shadow);
   }

   .youtube_video {
      justify-self: center;
      width: 100%;
      max-width: 960px;
      height: auto;
      aspect-ratio: 16 / 9;
      margin: 16px auto 32px;
      border-radius: var(--bd-radius);
   }

   /* footer logo + contact line repeated on every screen */
   .bottom_bar {
      width: 100%;
      height: auto;
      padding: 32px 0 8px;
      margin-top: 32px;
      grid-column: 1 / -1;
   }
   .bottom_logo img {
      width: 96px;
      height: 96px;
      margin-bottom: 8px;
   }
   .bottom_text {
      width: 100%;
      margin-top: 8px;
      margin-bottom: calc(var(--bd-shop) + 64px);
      line-height: 1.6;
      grid-column: 1 / -1;
   }

   /* ---- welcome ---------------------------------------------------------- */

   .welcome_screen {
      height: auto;
      min-height: calc(100vh - var(--bd-bar) - var(--bd-shop) - 48px);
      overflow: visible;
      align-content: start;
      padding-top: 16px;
      padding-bottom: calc(var(--bd-shop) + 48px);
   }
   .ws_title {
      position: static;
      justify-self: center;
      width: auto;
      margin: 0 auto;
      padding: 0 40px 6px;
      font-size: 48px;
   }
   .ws_text {
      height: auto;
      margin-top: 24px;
      margin-bottom: 48px;
      font-size: 20px;
   }
   .tiles {
      height: auto;
      margin: 0 auto;
      grid-template-columns: repeat(2, 200px);
      justify-content: center;
      gap: 32px;
   }
   .tiles > div {
      width: 200px;
      height: 200px;
      border-radius: 24px;
      cursor: pointer;
      transition: transform .2s ease, filter .2s ease;
   }
   .tile_in, .tile_ed { margin-top: 0; }
   .dot {
      width: 96px;
      height: 96px;
      margin-top: 24px;
   }
   .tile_text {
      margin-bottom: 20px;
      font-size: 1.15rem;
   }

   /* ---- sunflower festival ----------------------------------------------- */

   .sf_video { grid-template-columns: 1fr; }
   .sf_options {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      margin: 8px 0 56px;
   }
   .button_option {
      grid-column: auto;
      width: 100%;
      height: 140px;
      margin: 0;
      font-size: 20px;
      white-space: normal;
      background-position: center;
      cursor: pointer;
      transition: transform .2s ease, filter .2s ease;
   }

   .sf_map { display: grid; }
   .sf_map_images > div { row-gap: 8px; }
   button.next_map, button.next_map_2, button.next_map_3, button.next_map_4 {
      box-sizing: border-box;
      width: 100%;
      max-width: var(--bd-media);
      height: 52px;
      margin: 16px auto 8px;
      padding: 0 24px;
      grid-template-columns: 1fr auto;
      cursor: pointer;
      transition: transform .15s ease, filter .15s ease;
   }
   .key1, .key2, .key3, .key4 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 240px));
      justify-content: center;
      column-gap: 40px;
      row-gap: 4px;
   }
   .key { text-align: left; }

   /* ---- our farm --------------------------------------------------------- */

   .of_photo > img { margin-bottom: 40px; }
   .of_options {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      margin: 32px 0 56px;
   }
   .of_button {
      grid-column: auto;
      width: 100%;
      height: 140px;
      margin: 0;
      background-size: cover;
      background-position: center;
      cursor: pointer;
      transition: transform .2s ease, filter .2s ease;
   }
   .of_button_arrow { width: 28px; height: 28px; }

   /* ---- insects ---------------------------------------------------------- */

   .in_options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin: 24px 0 16px;
   }
   .in_button {
      grid-column: auto;
      box-sizing: border-box;
      width: 100%;
      height: 84px;
      margin: 0;
      padding: 0 16px;
      grid-template-columns: 64px minmax(0, 1fr);
      column-gap: 12px;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease;
   }
   .in_button_text {
      margin: auto 0;
      white-space: normal;
      font-size: 16px;
   }

   /* single-insect screens: photo beside its name and description */
   .changeable_content > [class^="io_"] {
      align-content: start;
      column-gap: 48px;
   }
   .snd_cls_in { font-size: 22px; }
   .snd_desc_in { margin-top: 16px; margin-bottom: 16px; }

   /* ---- weekend (photo slider) ------------------------------------------- */

   .weekend { place-items: stretch; }
   .wend2_slider {
      width: 100%;
      max-width: 860px;
      height: clamp(380px, 60vh, 540px);
      margin: 8px auto 40px;
   }
   .wend2_image {
      width: 100%;
      height: 100%;
      border-radius: var(--bd-radius);
      box-shadow: var(--bd-shadow);
      grid-gap: 0;
      grid-template-columns: 1fr 1fr;
      padding: 0 20px;
      box-sizing: border-box;
   }
   .wend_left_arrow { justify-self: start; }
   .wend_right_arrow { justify-self: end; }
   .wend2_image > div > img {
      height: 52px;
      width: 52px;
      padding: 10px;
      object-fit: contain;
      box-sizing: border-box;
      background: rgba(255, 255, 255, .85);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
      cursor: pointer;
      border-radius: 50%;
      transition: transform .15s ease;
   }

   /* ---- weekday + community: photo cards --------------------------------- */

   .wday_image_container, .com_img {
      box-sizing: border-box;
      width: 100%;
      max-width: var(--bd-media);
      height: auto;
      margin: 24px auto 16px;
      display: grid;
      place-items: center;
   }
   /* caption sits on the photo instead of being pushed down with vh */
   .wday_image_container > *, .com_img > * { grid-area: 1 / 1; }
   .pl_text {
      position: relative;
      top: auto;
      z-index: 1;
      align-self: end;
      margin-bottom: 20px;
      padding: 0 16px;
      font-size: 32px;
      text-align: center;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
   }
   .wday_subtext { padding-top: 0; margin-bottom: 24px; }
   #wday_description { margin-top: 24px; font-size: 22px; }
   .community { place-items: stretch; }
   .com_text { text-align: center; }

   /* ---- our story -------------------------------------------------------- */

   .story { place-items: stretch; column-gap: 48px; row-gap: 24px; }
   .story > .os_img { width: 100%; height: auto; }
   .os_text { padding: 0; }
   .os_text > p { padding: 0; margin: 0 0 16px; }

   .os_gallery_container {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin-top: 24px;
   }
   .os_gallery {
      width: 100%;
      height: auto;
      border-radius: 12px;
      box-shadow: var(--bd-shadow);
      cursor: zoom-in;
      transition: transform .2s ease, box-shadow .2s ease;
   }
   .os_arrows {
      height: auto;
      grid-template-columns: auto auto;
      justify-content: center;
      gap: 48px;
      padding: 24px 0;
   }
   .os_left, .os_right {
      width: 48px;
      height: 48px;
      cursor: pointer;
      transition: transform .15s ease;
   }

   /* ---- lightboxes (story + vision galleries) ---------------------------- */

   .os_gallery_lightbox, .vs_gallery_lightbox, .vs_spec_img {
      width: 100vw;
      left: 0;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
   }
   .os_gallery_lightbox > .os_gallery_source, .vs_gallery_source {
      width: auto;
      max-width: min(90vw, 1000px);
      max-height: calc(100vh - 2 * var(--bd-bar));
      margin-top: 0;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
   }
   .os_gallery_cycle, .vs_gallery_cycle {
      position: fixed;
      top: 50%;
      left: 0;
      right: 0;
      width: auto;
      display: flex;
      justify-content: space-between;
      padding: 0 32px;
      transform: translateY(-50%);
      pointer-events: none;
   }
   .os_cycle_left, .os_cycle_right, .vs_cycle_left, .vs_cycle_right {
      width: 56px;
      height: 56px;
      margin-top: 0;
      pointer-events: auto;
      cursor: pointer;
      transition: transform .15s ease;
   }
   .exit_os_cycle, .exit_vs_cycle {
      width: 48px;
      height: 48px;
      margin: 0;
      top: calc(var(--bd-bar) + 24px);
      left: 32px;
      cursor: pointer;
      z-index: 1000;
   }

   /* ---- vision ----------------------------------------------------------- */

   .vision { place-items: center; }
   .vs_img { width: 100%; }
   .vs_description { padding: 24px 0; font-size: 20px; }
   /* the sunflower "shuffle" button sits in the middle of the 2x2 gallery */
   .vision > .inner_circle, .vision > .vs_gallery { grid-row: 4; grid-column: 1; }
   .inner_circle { top: auto; cursor: pointer; }
   .vs_gallery {
      height: auto;
      grid-template-columns: repeat(2, 260px);
      grid-auto-rows: 260px;
      gap: 28px;
      margin: 16px 0;
   }
   .vs_gallery > img {
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      border-radius: 12px;
      box-shadow: var(--bd-shadow);
      cursor: zoom-in;
      transition: transform .2s ease, box-shadow .2s ease;
   }

   /* ---- partners --------------------------------------------------------- */

   .partner { place-items: stretch; }
   .pt_partners {
      box-sizing: border-box;
      width: 100%;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      padding-bottom: 48px;
      margin-top: 32px;
   }
   .pt_partners > div {
      width: 100%;
      height: 160px;
      transition: transform .2s ease, box-shadow .2s ease;
   }
   .pt_partners > div > img, .pt_partners > div > a > img {
      max-width: 78%;
      max-height: 112px;
      cursor: pointer;
   }
   .pt_partners > div.pt_sk > a > img { max-height: 88px; }
   .pt_credit { font-size: 13px; }

   /* ---- education -------------------------------------------------------- */

   .ed_slider {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      max-width: 860px;
      height: clamp(360px, 55vh, 500px);
      margin: 16px auto 32px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 100%;
      place-items: center stretch;
   }
   #ed_slider_img {
      grid-area: 1 / 1 / 2 / 3;
      width: 100%;
      height: 100%;
      border-radius: var(--bd-radius);
      box-shadow: var(--bd-shadow);
   }
   #ed_slider_left, #ed_slider_right {
      grid-row: 1;
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      z-index: 1;
      width: 64px;
      height: 64px;
      display: grid;
      place-items: center;
      font-size: 64px;
      line-height: 1;
      padding-bottom: 8px;
      box-sizing: border-box;
      border-radius: 50%;
      background: rgba(255, 255, 255, .85);
      box-shadow: var(--bd-shadow);
      cursor: pointer;
      user-select: none;
      transition: transform .15s ease;
   }
   #ed_slider_left { grid-column: 1; justify-self: start; margin-left: 20px; }
   #ed_slider_right { grid-column: 2; justify-self: end; margin-right: 20px; }

   .ed_options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      margin: 16px 0 24px;
      place-items: stretch;
   }
   .ed_button {
      box-sizing: border-box;
      width: 100%;
      height: 76px;
      margin: 0;
      padding: 0 20px;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 12px;
      cursor: pointer;
      transition: transform .2s ease, filter .2s ease;
   }
   .ed_button_text { padding-left: 0; }

   .ed_anatomy, .ed_bloom, .ed_choosing, .ed_planting, .ed_cutting,
   .ed_caring, .ed_harvesting, .ed_sunflower, .ed_pests {
      padding-bottom: 0;
      align-content: start;
   }
   .ed_img { width: 100%; margin: 8px 0 24px; }
   /* education photos include portrait ones (Anatomy is 496x1000): cap height */
   .ed_img > img {
      width: auto;
      max-height: 80vh;
   }

   /* ---- photo upload form ------------------------------------------------ */

   #formElement {
      box-sizing: border-box;
      width: 100%;
      max-width: 640px;
      padding: 24px 32px 0;
      border-radius: var(--bd-radius);
      background: rgba(255, 255, 255, .9);
   }
   input[type="submit"] { width: 100%; height: 56px; }
   .hide_replacement, .hide_text { width: 160px; height: 80px; }
   .photo_title { margin-bottom: 32px; }

   /* ---- interaction states ----------------------------------------------- */

   [role="button"], [role="link"], .tiles > div, .os_gallery, .vs_gallery > img {
      cursor: pointer;
   }

   :focus-visible {
      outline: 3px solid var(--bd-brown);
      outline-offset: 3px;
   }

   @media (hover: hover) {
      .tiles > div:hover {
         transform: translateY(-6px);
         filter: drop-shadow(0 12px 18px #00000033);
      }
      .button_option:hover, .of_button:hover, .ed_button:hover {
         transform: translateY(-3px);
         filter: drop-shadow(0 10px 16px #00000033);
      }
      .in_button:hover {
         transform: translateY(-3px);
         box-shadow: var(--bd-shadow-hover);
      }
      .pt_partners > div:hover, .os_gallery:hover, .vs_gallery > img:hover {
         transform: translateY(-4px);
         box-shadow: var(--bd-shadow-hover);
      }
      button.next_map:hover, button.next_map_2:hover, button.next_map_3:hover,
      button.next_map_4:hover {
         transform: translateY(-2px);
      }
      .sunflower_shop:hover {
         background-color: rgba(255, 198, 48, .35);
      }
      .daBackButton:hover img, .wend2_image > div > img:hover,
      .os_left:hover, .os_right:hover, #ed_slider_left:hover,
      #ed_slider_right:hover, .os_cycle_left:hover, .os_cycle_right:hover,
      .vs_cycle_left:hover, .vs_cycle_right:hover {
         transform: scale(1.12);
      }
      .bottom_text a:hover { text-decoration: underline; }
   }

   @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; }
   }
}

/* ---- wider screens: more columns and side-by-side layouts --------------- */

@media (min-width: 1024px) {

   .tiles { grid-template-columns: repeat(4, 200px); }
   .in_options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .pt_partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
   .ed_options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
   .os_gallery_container { grid-template-columns: repeat(4, minmax(0, 1fr)); }

   /* weekday + community: photo on the left, its description on the right */
   .weekday, .community {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 48px;
      align-items: center;
   }
   .weekday > h2, .weekday > h1, .weekday > #wday_description, .community > .com_title {
      grid-column: 1 / -1;
   }
   .weekday > .wday_image_container, .community > .com_img { grid-column: 1; margin: 16px 0; }
   .weekday > .wday_subtext, .community > .com_text { grid-column: 2; margin: 16px 0; text-align: left; }
   .community > .com_text > p { text-align: left; }
   /* the closing "Learn More" call-out spans both columns */
   .community > .com_text:nth-child(10) { grid-column: 1 / -1; text-align: center; margin-top: 32px; }

   /* our story: alternating photo / text rows */
   .story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
   .story > * { grid-column: 1 / -1; }
   .story > :nth-child(2) { grid-column: 1; grid-row: 2; }
   .story > :nth-child(3) { grid-column: 2; grid-row: 2; }
   .story > :nth-child(4) { grid-column: 2; grid-row: 3; }
   .story > :nth-child(5) { grid-column: 1; grid-row: 3; }
   .story > :nth-child(6) { grid-column: 1; grid-row: 4; }
   .story > :nth-child(7) { grid-column: 2; grid-row: 4; }
   .story > :nth-child(8) { grid-column: 2; grid-row: 5; }
   .story > :nth-child(9) { grid-column: 1; grid-row: 5; }
   .os_text > p { text-align: left; }

   /* single insect: photo beside its name + description */
   .changeable_content > [class^="io_"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
   }
   .changeable_content > [class^="io_"] > .i_title { grid-column: 1 / -1; }
   .changeable_content > [class^="io_"] > .snd_img_in { grid-column: 1; grid-row: 2 / span 2; }
   .changeable_content > [class^="io_"] > .snd_cls_in { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
   .changeable_content > [class^="io_"] > .snd_desc_in { grid-column: 2; grid-row: 3; align-self: start; }
   .changeable_content > [class^="io_"] > .bottom_bar,
   .changeable_content > [class^="io_"] > .bottom_text { grid-column: 1 / -1; }
}

@media (min-width: 1440px) {
   :root { --bd-max: 1200px; --bd-bar: 132px; }
   .vs_gallery { grid-template-columns: repeat(2, 300px); grid-auto-rows: 300px; }
}