/* =========================================================
   ONZE KEUKEN — APP VISUAL POLISH V1

   Alleen normale interface.
   Cooking UI bewust onaangeraakt.
   ========================================================= */


/* =========================================================
   HEADER — DESKTOP
   ========================================================= */

@media (min-width: 851px) {

  header {
    padding:
      14px
      0
      12px;
  }


  header .container {
    display: flex;
    align-items: center;
    gap: 18px;

    width:
      min(
        calc(100% - 36px),
        1440px
      );

    margin:
      0
      auto;
  }


  /*
   * Branding iets compacter.
   */
  header h1 {
    margin: 0;

    font-size:
      clamp(
        28px,
        2.4vw,
        38px
      );

    line-height: .98;
  }


  header p {
    margin:
      5px
      0
      0;

    font-size: 14px;
    line-height: 1.35;
  }


  /*
   * Accountblok minder dominant.
   */
  .auth-account,
  .auth-user-name {
    flex: 0 0 auto;
  }


  /*
   * Navigatie neemt beschikbare ruimte in
   * maar wordt compacter.
   */
  header .bottom-nav {
    margin-left: auto;

    padding: 7px;

    gap: 3px;

    border-radius: 22px;

    box-shadow:
      0
      10px
      30px
      rgba(63, 47, 35, .08);
  }


  header .nav-button {
    min-width: 78px;
    min-height: 58px;

    padding:
      7px
      11px;

    border-radius: 16px;
  }


  header .nav-button span {
    font-size: 18px;
  }
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.page-header {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 20px;
}


.page-header h2 {
  margin: 0;

  font-size:
    clamp(
      30px,
      3vw,
      42px
    );

  line-height: 1.05;
}


.back-button {
  flex: 0 0 auto;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  padding: 0;

  border-radius: 17px;

  box-shadow:
    0
    5px
    18px
    rgba(65, 45, 30, .05);
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-box {
  margin-bottom: 18px;
}


.search-box input {
  min-height: 62px;

  padding:
    0
    22px;

  border:
    1px
    solid
    #e8ded5;

  border-radius: 20px;

  background:
    rgba(
      255,
      255,
      255,
      .92
    );

  font-size: 17px;

  box-shadow:
    0
    7px
    24px
    rgba(65, 45, 30, .045);

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.search-box input:focus {
  outline:
    3px
    solid
    rgba(218, 121, 84, .12);

  border-color:
    rgba(
      218,
      121,
      84,
      .55
    );

  box-shadow:
    0
    10px
    28px
    rgba(65, 45, 30, .07);
}


/* =========================================================
   FILTERBLOK
   ========================================================= */

.filters-wrap {
  margin:
    0
    0
    28px !important;

  padding:
    18px
    20px
    16px;

  border:
    1px
    solid
    #eadfd5;

  border-radius: 22px;

  background:
    rgba(
      247,
      242,
      237,
      .72
    );

  box-shadow:
    0
    7px
    22px
    rgba(65, 45, 30, .035);
}


.recipe-filter-columns {
  gap: 14px;
}


.recipe-filter-label {
  margin-bottom: 7px;

  color: #776c64;

  font-size: 12px;

  letter-spacing: .01em;
}


.recipe-filter-select {
  min-height: 52px;

  border-color: #e2d6cb;

  border-radius: 15px;

  background-color:
    rgba(
      255,
      255,
      255,
      .96
    );

  box-shadow: none;
}


.recipe-count {
  margin:
    13px
    0
    0
    2px;

  color: #877b72;

  font-size: 13px;
}


/* =========================================================
   RECIPE GRID
   ========================================================= */

.recipes-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    22px
    20px;
}


/* =========================================================
   RECIPE CARD
   ========================================================= */

.recipe-card {
  position: relative;

  overflow: hidden;

  border:
    1px
    solid
    rgba(
      221,
      207,
      196,
      .72
    );

  border-radius:
    23px !important;

  background: #fff;

  box-shadow:
    0
    7px
    24px
    rgba(62, 43, 29, .055);

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}


.recipe-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0
    14px
    34px
    rgba(62, 43, 29, .10);
}


.recipe-image-wrap {
  position: relative;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  background: #f1e8df;
}


.recipe-image-wrap img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .25s ease;
}


.recipe-card:hover
.recipe-image-wrap img {
  transform: scale(1.025);
}


/* categorie op foto */

.recipe-badge {
  left: 13px;
  bottom: 13px;

  padding:
    7px
    11px;

  border:
    1px
    solid
    rgba(255,255,255,.65);

  background:
    rgba(
      255,
      255,
      255,
      .92
    );

  font-size: 11px;

  box-shadow:
    0
    4px
    15px
    rgba(0, 0, 0, .08);
}


/* tekstgedeelte */

.recipe-card-body {
  padding:
    17px
    17px
    16px !important;
}


.recipe-card-title {
  min-height: 46px;

  margin: 0;

  font-size:
    18px !important;

  line-height: 1.18;

  letter-spacing: -.015em;
}


.recipe-card-footer {
  gap:
    7px
    13px;

  margin-top:
    11px !important;

  padding-top: 10px;

  border-top:
    1px
    solid
    #f0e9e3;

  color: #83786f;

  font-size:
    13px !important;
}


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

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

  .recipes-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


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

@media (max-width: 650px) {

  .page-header {
    margin-bottom: 16px;
  }


  .page-header h2 {
    font-size: 30px;
  }


  .back-button {
    width: 48px;
    height: 48px;

    border-radius: 15px;
  }


  .search-box input {
    min-height: 55px;

    padding:
      0
      17px;

    border-radius: 17px;

    font-size: 16px;
  }


  .filters-wrap {
    padding:
      15px !important;

    border-radius:
      19px;
  }


  .recipe-filter-columns {
    grid-template-columns:
      1fr;

    gap: 12px;
  }


  .recipe-filter-select {
    min-height:
      48px;
  }


  .recipes-grid {
    grid-template-columns:
      1fr;

    gap: 18px;
  }


  .recipe-card {
    border-radius:
      21px !important;
  }


  .recipe-image-wrap {
    aspect-ratio:
      16 / 10;
  }


  .recipe-card-title {
    min-height: 0;

    font-size:
      19px !important;
  }
}


/* =========================================================
   COMPACT DESKTOP HEADER
   851px - 1150px

   Op deze breedte niet alles in één rij proppen.
   De navigatie krijgt een eigen tweede regel.
   ========================================================= */

@media
  (min-width: 851px)
  and (max-width: 1150px) {

  header {
    padding:
      12px
      0
      14px;
  }


  header .container {
    flex-wrap: wrap;

    gap:
      10px
      14px;

    align-items: center;
  }


  /*
   * Branding compact houden zodat
   * "Onze Keuken" niet lelijk afbreekt.
   */
  header h1 {
    font-size: 30px;
    line-height: 1;

    white-space: nowrap;
  }


  header p {
    margin-top: 4px;

    font-size: 13px;

    white-space: nowrap;
  }


  /*
   * User / logout compacter,
   * maar nog steeds makkelijk klikbaar.
   */
  .auth-account,
  .auth-user-name {
    font-size: 13px;
  }


  .auth-logout {
    min-height: 42px;

    padding:
      0
      14px;

    font-size: 13px;
  }


  /*
   * Navigatie op eigen tweede regel.
   */
  header .bottom-nav {
    order: 50;

    width: 100%;

    margin:
      2px
      0
      0;

    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );

    padding: 6px;

    border-radius: 20px;
  }


  header .nav-button {
    min-width: 0;
    min-height: 55px;

    padding:
      6px
      8px;

    border-radius: 15px;
  }


  header .nav-button span {
    font-size: 17px;
  }


  header .nav-button small,
  header .nav-button .nav-label {
    font-size: 12px;
  }
}


@media
  (min-width: 851px)
  and (max-width: 1150px) {

  main > .container,
  .app > .container {
    width:
      min(
        calc(100% - 30px),
        1000px
      );
  }
}


/* =========================================================
   COMPACT DESKTOP — ACCOUNT RECHTS
   Full desktop blijft onaangeraakt.
   ========================================================= */

@media
  (min-width: 851px)
  and (max-width: 1150px) {

  /*
   * De accountknop is het eerste element
   * van het accountgedeelte.
   * margin-left:auto duwt Terry + Uitloggen
   * naar de rechterkant van de eerste rij.
   */
  header .auth-account {
    margin-left: auto;
  }


  header .auth-account,
  header .auth-logout {
    flex: 0 0 auto;
  }


  /*
   * Kleine nette afstand tussen
   * gebruikersnaam en uitloggen.
   */
  header .auth-logout {
    margin-left: 4px;
  }


  /*
   * Navigatie blijft altijd volledig
   * op zijn eigen tweede regel.
   */
  header .bottom-nav {
    flex-basis: 100%;
    width: 100%;
    margin-left: 0;
  }
}


/* =========================================================
   HOMEPAGE — MIJN ACCOUNT
   ========================================================= */

.home-account-action {
  position: relative;

  overflow: hidden;

  border:
    1px
    solid
    #e5d9ce;

  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #f8f1eb 100%
    );
}


.home-account-action::after {
  content: "→";

  position: absolute;

  top: 20px;
  right: 22px;

  color: #b96d4e;

  font-size: 25px;
  font-weight: 800;

  opacity: .75;
}


.home-account-action:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0
    12px
    30px
    rgba(66, 46, 32, .09);
}


.home-account-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: 14px;

  border-radius: 15px;

  background:
    rgba(
      218,
      121,
      84,
      .12
    );

  font-size: 25px;
}


@media (max-width: 650px) {

  .home-account-action::after {
    top: 15px;
    right: 16px;

    font-size: 21px;
  }


  .home-account-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 10px;

    font-size: 22px;
  }
}