/* =========================
       BASIC SETTINGS
       ========================= */

    :root {
      --pixel-size: 110px;
      --gap: 8px;

      --background: white;
      --pixel-background: white;
      --pixel-border: #222;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;

      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      padding-top: 0;

      background: var(--background);
      font-family: Arial, sans-serif;
    }


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

    .page-header {
      position: relative;
  z-index: 11;
	width: 100%;
      margin-bottom: 20px;
      text-align: center;
      font-family: "Lavishly Yours", cursive;
      font-size: 36px;
      font-weight: 400;
    }

.page-header a {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);

  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: normal;
  text-shadow: none;
  color: #222;
  text-decoration: none;
}

.page-header .home {
  left: 30px;
  right: auto;
}

.page-header .second-icon {
  top: calc(50% + 40px);
  transform: translateY(-50%);
}

.page-header .third-icon {
  top: calc(50% + 80px);
  transform: translateY(-50%);
}

.page-header a:hover {
  text-decoration: none;
}

#countdown {
  position: absolute;
  right: 30px;
  top: calc(50% + 110px);
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 20px;
  font-weight: normal;
  text-shadow: none;
  color: #222;
  text-decoration: none;
}

#countdown-label {
  display: block;
  font-size: 16px;
}

    /* =========================
       7 × 6 HEART GRID
       ========================= */

    .heart-grid {
      display: grid;

      grid-template-columns: repeat(7, var(--pixel-size));
      grid-template-rows: repeat(6, var(--pixel-size));

      gap: var(--gap);
    }


    /* =========================
       IMAGE BLOCKS
       ========================= */

    .cincy {
      width: var(--pixel-size);
      height: var(--pixel-size);

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

      background: var(--pixel-background);
      border: none;

      overflow: hidden;

      text-align: center;
      font-size: 14px;

      cursor: pointer;
    }

.cincy img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

    /* =========================
       LARGE DETAILS BLOCK
       ========================= */

    .details-block {
      grid-column: 3 / span 3;
      grid-row: 3 / span 2;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      background: white;
      border: none;

      overflow: hidden;

      text-align: center;
      font-size: 16px;
    }

.details-block a {
  color: #0066CC;
}

.details-block a:visited {
  color: #0066CC;
}

.details-block h2 {
  font-family: "Bayon", sans-serif;
  font-size: 26px;
  letter-spacing: 1px;
  margin: 8px 0 0 0;
}

    /* =========================
       TEXT BLOCKS
       ========================= */

	.text-block {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pixel-background);
  border: none;
  overflow: hidden;
  text-align: center;
   font-family: "Bayon", sans-serif;
      font-size: 72px;
	color: #C0C0C0;
}

.text-block-9-10 {
  grid-column: 2 / span 2;
  grid-row: 2;
}

.text-block-12-13 {
  grid-column: 5 / span 2;
  grid-row: 2;
}


    /* =========================
       BLOCK POSITIONS
       =========================

       Grid:

       □ ■ ■ □ ■ ■ □
       ■ [ 9 + 10 ] ■ [ 12 + 13 ] ■
       ■ □ [ BIG DETAILS ] □ ■
       □ ■ [ BIG DETAILS ] ■ □
       □ □ ■ □ ■ □ □
       □ □ □ ■ □ □ □

       Image blocks:

       2, 3, 5, 6,
       8, 11, 14,
       15, 21,
       23, 27,
       31, 33,
       39

       Large details block:

       17, 18, 19,
       24, 25, 26

       Text blocks:

       9, 10, 12, 13
    */


    /* Row 1 */
    .block-2 {
      grid-column: 2;
      grid-row: 1;
    }

    .block-3 {
      grid-column: 3;
      grid-row: 1;
    }

    .block-5 {
      grid-column: 5;
      grid-row: 1;
    }

    .block-6 {
      grid-column: 6;
      grid-row: 1;
    }


    /* Row 2 */
    .block-8 {
      grid-column: 1;
      grid-row: 2;
    }

    .block-11 {
      grid-column: 4;
      grid-row: 2;
    }

    .block-14 {
      grid-column: 7;
      grid-row: 2;
    }


    /* Row 3 */
    .block-15 {
      grid-column: 1;
      grid-row: 3;
    }

    .block-21 {
      grid-column: 7;
      grid-row: 3;
    }


    /* Row 4 */
    .block-23 {
      grid-column: 2;
      grid-row: 4;
    }

    .block-27 {
      grid-column: 6;
      grid-row: 4;
    }


    /* Row 5 */
    .block-31 {
      grid-column: 3;
      grid-row: 5;
    }

    .block-32 {
      grid-column: 4;
      grid-row: 5;
    }

    .block-33 {
      grid-column: 5;
      grid-row: 5;
    }


    /* Row 6 */
    .block-39 {
      grid-column: 4;
      grid-row: 6;
    }


/* =========================
   EVENTS PAGE
   ========================= */

.events-page {
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto 40px;
}

.events-title {
  position: sticky;
  top: 0;
  z-index: 10;

  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;

  padding: 10px 0;
  background: white;
}

.events-title h1 {
  margin: 0;
  font-family: "Bayon", sans-serif;
  font-size: 32px;
  font-weight: 400;
}

.events-title span {
  font-family: Arial, sans-serif;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event {
  position: relative;
  padding: 16px 20px;
  background: none;
  border: none;
}

.event h2 {
  margin: 0 0 8px;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.event:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 8px;
  background: #CC003D;
}

.event-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #000;
}

.event-link {
  font-size: 14px;
  color: #0066CC;
}

.event-link a:visited {
  color: #0066CC;
}

.event-details {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
}

    .event-filter {
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 14px;
    }

    .event-filter label {
      font: inherit;
      color: #000;
    }

    .event-filter select {
      font: inherit;
      color: white;
      padding: 6px 32px 6px 10px;
      max-width: 100%;
      border: none;
      outline: none;
      box-shadow: none;
      border-radius: 0;
      background-color: #CC003D;
    }

/* =========================
   CAREW PAGE
   ========================= */

.carew {
  position: relative;
  padding: 16px 20px;
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

.quote {
  position: relative;
  padding: 16px 18%;
  background: none;
  border: none;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

.carew-link {
  color: #0066CC;
}

.carew-link a:visited {
  color: #0066CC;
}

.carew-carousel {
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.carew-track {
  display: flex;
  width: max-content;
  animation: carew-scroll 90s linear infinite;
}

.carew-slide {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}

.carew-slide img {
  width: 250px;
  height: 180px;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes carew-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.carew-photo {
  cursor: pointer;
}

/* Expanded photo */
.carew-lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.carew-lightbox.active {
  display: flex;
}

.carew-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.carew-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 40px;
  cursor: pointer;
  padding: 20px;
  z-index: 1001;
}

.carew-lightbox-arrow.left {
  left: 20px;
}

.carew-lightbox-arrow.right {
  right: 20px;
}

.carew-lightbox-arrow:hover {
  color: #CC003D;
}

/* Mobile layout overrides */
@media (max-width: 800px) {
  :root {
    --pixel-size: 12vw;
    --gap: 4px;
  }

  .page-header {
    width: 100%;
    margin-bottom: 20px;
    padding: 0 15px;
    text-align: center;
    font-size: 22px;
    line-height: 1.1;
  }

  .page-header > span {
    display: block;
    max-width: 280px;
    margin: 0 auto;
  }

  .page-header a {
    position: static;
    display: inline-block;
    transform: none;
    margin-top: 8px;
    margin-right: 12px;
    font-size: 18px;
  }

  .heart-grid {
    gap: var(--gap);
  }

  .text-block {
    font-size: 5vw;
  }

  .details-block {
    padding: 4px;
    font-size: 12px;
    line-height: 1.25;
  }

  .details-block h2 {
    font-size: 18px;
    margin-top: 4px;
  }

  #countdown {
    position: static;
    display: block;
    margin: 8px auto 0;
    font-size: 18px;
  }

  #countdown-label {
    font-size: 14px;
  }

  .events-page {
    width: calc(100% - 20px);
  }

  .events-title {
    flex-wrap: wrap;
    padding: 0;
    gap: 2px 6px;
  }

  .events-title h1 {
    font-size: 26px;
    text-align: center;
  }

  .events-title span {
    font-size: 14px;
  }

  .event {
    padding: 12px 10px;
  }

  .event-info {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .event-link {
    overflow-wrap: anywhere;
  }

  .carew {
    padding: 12px 10px;
    font-size: 16px;
    line-height: 1.4;
  }

  .quote {
    padding: 16px 10px;
    font-size: 16px;
  }

  .carew-slide {
    gap: 8px;
    padding-right: 8px;
  }

  .carew-slide img {
    width: 200px;
    height: 145px;
  }

  .carew-lightbox {
    padding: 15px;
  }

  .carew-lightbox img {
    max-width: 95vw;
    max-height: 85vh;
  }

  .carew-lightbox-arrow {
    font-size: 32px;
    padding: 12px;
  }

  .carew-lightbox-arrow.left {
    left: 0;
  }

  .carew-lightbox-arrow.right {
    right: 0;
  }
}