/* ==========================================
   RECIPE LAYOUT POLISH - CLEAN FINAL V5
   ========================================== */


/* ------------------------------------------
   ALGEMENE ACTIEKNOPPEN
   ------------------------------------------ */

.family-hero-actions-v10 {
  width: 100%;
}

.family-hero-actions-v10
#start-cooking,

.family-hero-actions-v10
#recipe-shopping-button,

.family-hero-actions-v10
#recipe-share-button {
  box-sizing: border-box !important;

  margin: 0 !important;

  border-radius: 18px !important;

  font-size: 16px !important;
  font-weight: 900 !important;

  line-height: 1.2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}


/* ==========================================
   DESKTOP
   ========================================== */

@media (min-width: 901px) {

  /*
   * Linker bedieningsdeel voldoende breed.
   */
  #main
  *:has(> .family-hero-actions-v10) {
    grid-template-columns:
      minmax(430px, .95fr)
      minmax(0, 1.25fr) !important;

    column-gap: 28px !important;

    align-items: start !important;
  }


  /* ----------------------------------------
     PORTIES

     Belangrijk:
     oude position / transform / flex-regels
     volledig resetten.
     ---------------------------------------- */

  .family-servings-box {
    position: static !important;

    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    grid-template-rows:
      auto !important;

    align-items: center !important;

    gap: 18px !important;

    margin:
      0
      0
      12px !important;

    padding:
      12px
      14px !important;

    border-radius: 18px !important;

    background:
      rgba(255, 255, 255, .62) !important;
  }


  .family-servings-title {
    position: static !important;

    inset: auto !important;

    transform: none !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    display: block !important;

    font-weight: 900 !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;
  }


  .family-servings-control {
    position: static !important;

    inset: auto !important;

    transform: none !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 9px !important;
  }


  .family-servings-button {
    position: static !important;

    flex:
      0 0 52px !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }


  .family-servings-input {
    position: static !important;

    flex:
      0 0 72px !important;

    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    height: 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    text-align: center !important;
  }


  /*
   * Extra uitleg is hier niet nodig.
   */
  .family-servings-subtitle,
  .family-scale-note {
    display: none !important;
  }


  /* ----------------------------------------
     ACTIES
     ---------------------------------------- */

  .family-hero-actions-v10 {
    display: grid !important;

    grid-template-columns:
      minmax(190px, 1fr)
      minmax(190px, 1fr) !important;

    gap: 12px !important;

    align-items: stretch !important;

    border-right: 0 !important;
  }


  .family-hero-actions-v10
  #start-cooking {
    grid-column: 1 !important;

    min-height: 60px !important;

    padding:
      0
      18px !important;

    white-space: nowrap !important;
  }


  .family-hero-actions-v10
  #recipe-shopping-button {
    grid-column: 2 !important;

    min-height: 60px !important;

    padding:
      0
      18px !important;

    white-space: nowrap !important;
  }


  .family-hero-actions-v10
  #recipe-share-button {
    grid-column:
      1 / -1 !important;

    width: 100% !important;

    min-height: 52px !important;

    padding:
      0
      18px !important;

    background:
      rgba(255, 255, 255, .62) !important;

    color: var(--text) !important;

    box-shadow: none !important;
  }


  /* ----------------------------------------
     RECEPTINFORMATIE
     ---------------------------------------- */

  .family-recipe-info-v10,
  .recipe-meta {
    align-self: start !important;
    align-content: start !important;
  }

}


/* ==========================================
   TABLET
   ========================================== */

@media
  (min-width: 651px)
  and
  (max-width: 900px) {

  .family-hero-actions-v10 {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 10px !important;
  }

  .family-hero-actions-v10
  #start-cooking,

  .family-hero-actions-v10
  #recipe-shopping-button,

  .family-hero-actions-v10
  #recipe-share-button {
    grid-column: 1 !important;

    width: 100% !important;

    min-height: 54px !important;
  }

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 650px) {

  /*
   * Mobiele layout was al goed:
   * alles netjes onder elkaar.
   */

  .family-hero-actions-v10 {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 10px !important;
  }


  .family-hero-actions-v10
  #start-cooking,

  .family-hero-actions-v10
  #recipe-shopping-button,

  .family-hero-actions-v10
  #recipe-share-button {
    grid-column: 1 !important;

    width: 100% !important;

    min-height: 54px !important;
  }


  .family-hero-actions-v10
  #recipe-share-button {
    min-height: 50px !important;
  }


  .family-servings-control {
    justify-content:
      center !important;
  }

}

/* ==========================================
   RECIPE LAYOUT V6
   Servings over beide actie-kolommen
   ========================================== */

@media (min-width: 901px) {

  .family-hero-actions-v10
  > .family-servings-box {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;

    justify-self: stretch !important;
  }

}

/* ==========================================
   RECIPE LAYOUT V7
   Definitieve desktop portiekeuze
   ========================================== */

@media (min-width: 901px) {

  /*
   * Portieblok over beide actie-kolommen.
   */
  .family-hero-actions-v10
  > .family-servings-box {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;

    display: grid !important;

    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;

    justify-items: center !important;
    align-items: center !important;

    gap: 10px !important;

    margin: 0 0 12px !important;

    padding: 16px 18px !important;

    border-radius: 18px !important;

    background:
      rgba(255, 255, 255, .62) !important;

    overflow: visible !important;
  }


  /*
   * Titel krijgt eigen regel.
   */
  .family-hero-actions-v10
  > .family-servings-box
  .family-servings-title {
    position: static !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    background: transparent !important;

    text-align: center !important;

    white-space: normal !important;

    line-height: 1.25 !important;

    font-weight: 900 !important;
  }


  /*
   * − 4 + op aparte regel.
   */
  .family-hero-actions-v10
  > .family-servings-box
  .family-servings-control {
    position: static !important;

    width: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }


  .family-hero-actions-v10
  > .family-servings-box
  .family-servings-button {
    position: static !important;

    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;

    height: 52px !important;

    flex: 0 0 52px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }


  .family-hero-actions-v10
  > .family-servings-box
  .family-servings-input {
    position: static !important;

    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    height: 52px !important;

    flex: 0 0 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    text-align: center !important;
  }


  .family-hero-actions-v10
  > .family-servings-box
  .family-servings-subtitle,

  .family-hero-actions-v10
  > .family-servings-box
  .family-scale-note {
    display: none !important;
  }
}