/* ==========================================================================
   BY Arkitektur - style.css
   Mobile first. Bred skärm (dator) börjar vid 700px.
   ========================================================================== */

/* ---------- FONTER ---------- */
/* OpenSauce: Regular används för normal text OCH för knappar (weight 100/lighter),
   Bold för rubriker. */
@font-face {
  font-family: 'OpenSauce';
  src: url('assets/fonts/OpenSauceSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSauce';
  src: url('assets/fonts/OpenSauceSans-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'OpenSauce';
  src: url('assets/fonts/OpenSauceSans-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'OpenSauce';
  src: url('assets/fonts/OpenSauceSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ---------- FÄRGER OCH MÅTT ---------- */
:root {
  --base: #ffffff;
  --contrast: #111111;
  --orange: #ce9755;
  --teal: #2c4551;
  --sand: #e5e0dc;

  --space-s: 10px;
  --space-m: 20px;
  --space-l: 30px;
  --space-xl: clamp(30px, 5vw, 50px);
  --space-xxl: clamp(30px, 7vw, 70px);

  --flow-gap: 1.2rem;      /* avstånd mellan stycken i en grupp */
  --margin: 4%;            /* standardmarginal (mobil) */
  --tile-ratio: 1.78;
  --font-small: 0.875rem;
  --font-large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
}

@media (min-width: 700px) {
  :root { --margin: 40px; }
}

/* ---------- GRUNDER ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--base);
  color: var(--contrast);
  font-family: 'OpenSauce', sans-serif;
  font-size: 90%;                 /* mobil */
  font-weight: normal;
  letter-spacing: -0.03em;
  line-height: 1.4;
}

h1, h2, h3, p, figure { margin: 0; }
img { max-width: 100%; height: auto; }

a {
  color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.1em;
}
a:hover { text-decoration: none; }

p, h1, h2, h3 { text-wrap: pretty; }

@media (min-width: 700px) {
  body { font-size: 110%; }
}

/* Hela sidan, max 2200px bred och centrerad */
.site {
  max-width: 2200px;
  margin-inline: auto;
  background: var(--base);
}

/* ---------- RUBRIKER ---------- */
/* s = liten (kontaktmail), m = plattornas rubriker, l = stora rubriker */
.heading {
  font-weight: bold;
  letter-spacing: -0.07em;
  line-height: 1.125;
}
.heading--m { font-size: 7vw; }
.heading--l { font-size: 8vw; }
.heading--s {
  font-size: 4vw;
  font-weight: normal;
  letter-spacing: -0.03em;
}

@media (min-width: 700px) {
  .heading--m { font-size: 4vw; }
  .heading--l { font-size: 5vw; }
  .heading--s { font-size: 2vw; }
}
@media (min-width: 1600px) {
  .heading--s { font-size: 1.5vw; }
}

/* Vit text på bilder och mörka plattor */
.on-image { color: var(--base); }

/* ---------- HEADER: liten fast logga ---------- */
.site-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10;
}
.site-logo img {
  display: block;
  width: 50px;
}

@media (min-width: 451px) {
  .site-logo { left: calc(1% + 20px); }
}
@media (min-width: 700px) {
  .site-logo { left: 45px; }
  .site-logo img { width: 69px; }
}

/* ---------- HERO: video i helskärm ---------- */
.hero {
  position: relative;
  z-index: 13;
  overflow: hidden;
  min-height: max(100vh, 700px);
  background: #000 url('assets/img/cropped-Hotels-Business-Website.png') center / cover no-repeat;
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: max(100vh, 700px);
  padding: 20px 30px;
}

/* Logotypen är svart i filen, görs vit med filter */
.hero__logo {
  width: 349px;
  max-width: 80%;
  height: auto;
  margin-bottom: 1em;           /* som WordPress-figurens standardmarginal */
  filter: invert(100%) sepia(3%) saturate(2%) hue-rotate(78deg) brightness(111%) contrast(101%);
}

/* ---------- PLATTOR (bildplattor i full bredd) ---------- */
.tile {
  min-height: 450px;
  align-content: center;
  padding: 40px var(--space-l);
  background-size: cover;
  text-align: center;
}
.tile > * + * { margin-top: var(--space-m); }

/* Mobil: höga plattor med bilden beskuren */
@media (max-width: 699px) {
  .tile {
    min-height: 80vh;
    background-position: center;
  }
}

/* Dator: plattan har bildens proportioner och hela bilden syns */
@media (min-width: 700px) {
  .tile {
    aspect-ratio: var(--tile-ratio);
    background-size: contain;
    padding-inline: 10px;
  }
}
@media (min-width: 800px)  { .tile { padding-inline: 120px; } }
@media (min-width: 1600px) { .tile { padding-inline: 300px; } }

/* Plattor med standardmarginal runt sig */
.tile--framed { margin: var(--margin); }

/* Lite större luft upp och ner */
.tile--roomy { padding-block: var(--space-xl); }

/* ---------- KNAPPAR ---------- */
/* Dator: tre ord (BOKA / ETT / MÖTE). Mobil: en knapp. */
.buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 45px 0 var(--space-m);
  padding: 0 var(--space-m);
}
.tile > .buttons { margin-top: 45px; }

.btn {
  display: block;
  width: 180px;
  padding: var(--space-s) 0;
  border: 1px solid currentColor;
  font-size: var(--font-small);
  font-weight: lighter;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.btn:hover { background: color-mix(in srgb, var(--contrast) 5%, transparent); }

.btn--word { display: none; }
@media (min-width: 700px) {
  .btn--word { display: block; }
  .btn--single { display: none; }
}

/* ---------- GRUPPBILD ---------- */
.group-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Visa bara på mobil / bara på dator */
.only-desktop { display: none; }
@media (min-width: 700px) {
  .only-mobile { display: none; }
  .only-desktop { display: block; }
}

/* ---------- HALVA PLATTOR (bild + text sida vid sida) ---------- */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--flow-gap);
  min-height: 450px;
  margin: var(--margin);
}

.split__half {
  width: 100%;
  aspect-ratio: var(--tile-ratio);
  align-content: center;
  padding: 22px var(--space-xl);
  background-size: cover;
  background-position: 51% 44%;
  text-align: center;
}
.split__half > * + * { margin-top: var(--flow-gap); }

/* Textrutor är stående även på mobil */
.split__half--standing { aspect-ratio: 0.85; }

.split__half--light {
  background: var(--base);
  color: var(--teal);
}

@media (min-width: 700px) {
  .split {
    flex-direction: row;
    gap: 40px;
  }
  .split__half { aspect-ratio: 0.85; }
}

/* ---------- KONTAKT / FOOTER ---------- */
.contact {
  margin: var(--margin);
  padding: calc(var(--space-xxl) + 70px) var(--space-l) calc(var(--space-xxl) + 100px + var(--flow-gap));
  background: var(--sand);
  align-content: center;
  text-align: center;
}

.contact__intro {
  max-width: 645px;
  margin-inline: auto;
}
.contact__intro > * + * { margin-top: var(--space-s); }

.contact__email { margin-top: 43px; padding-top: 1.125em; }  /* en rad luft ovanför mailadressen */
.contact__address { padding-block: var(--space-s); }

/* ---------- SOCIALA IKONER ---------- */
.social {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
}
.social a { display: inline-block; }
.social img { vertical-align: bottom; }
.social--large { margin-top: var(--space-s); }

/* ---------- TEAM: två personer per rad ---------- */
.team { margin-top: 76px; }

.team__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 3rem;
  padding-block: 30px;
  max-width: 1340px;
  margin-inline: auto;
}
.team__row + .team__row { margin-top: var(--space-s); }

.member {
  width: min(400px, 100%);
}
.member > * + * { margin-top: var(--flow-gap); }

.member > img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
}
.member__name { font-size: var(--font-large); }