/* ======================================================
   MAIN FILE
   ====================================================== */

@import url("styles.css");
@import url("age_gate.css"); 	 
@import url("header.css");		 
@import url("menu.css");		
@import url("main.css");		
@import url("shop.css");		 
@import url("footer.css");

/* == SKIP LINK == */
.skip-link {
  position: absolute;
  top: 8px;
  left: -9999px;
  z-index: 10000;

  padding: 10px 14px;
  border-radius: var(--radius-s);

  background: var(--brand-charcoal);
  color: var(--brand-cream);
  border: 1px solid var(--main-border-strong);

  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.skip-link:focus {
  left: 8px;
}

/* == EVENTS / BLOG LAYOUT == */
.main-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 18px;
}

.main-media {
   aspect-ratio: 4 / 3;
   overflow: hidden;
}

.main-body {
   position: relative;
   padding: 18px;
}

.main-excerpt-line {
   display: block;
}

.main-title {
   margin-bottom: 10px;
}

.main-excerpt {
   font-size: 14px;
   line-height: 1.6;
   opacity: 0.85;
}

/* == STORY SECTION == */
.story-section .section-head {
   margin: 0 auto 32px;
   position: relative;
   z-index: 1;
}

.story-media,
.story-content {
   position: relative;
   z-index: 1;
}

.story-block {
   display: grid;
   grid-template-columns: 1fr;

   margin: 0 auto;
   max-width: var(--container-max);
}

.story-media {
   display: flex;
   justify-content: center;
}

.story-media-frame {
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
   overflow: hidden;
}

.story-media img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: cover;
}

.story-content {
   display: flex;
   align-items: center;
}

.story-content-inner {
   width: 100%;
   max-width: none;
   margin: 0 auto;
   padding: 32px calc(var(--container-pad) - 36px);
}

.story-title-break {
   display: block;
}

.story-text {
   margin: 0 0 18px;
   line-height: 1.7;
}

.story-text:last-of-type {
   margin-bottom: 0;
}

/* == FIND US RULES == */
.find-us .find-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.find-us .find-us-map {
  border-radius: var(--radius-l);
  border: 1px solid var(--main-border);
  overflow: hidden;
  box-shadow: var(--main-shadow-1);
}

.find-us .find-us-road {
  max-width: 990px;
  margin: 48px auto 0;
}

.find-us .find-us-map iframe {
  display: block;
  width: 100%;
  border: 0;
}

.find-us .find-us-content {
  text-align: center;
}

.find-us .find-us-times + p {
  margin-top: 24px;
}

.find-us-time {
  margin-bottom: 10px;
}

.find-us .find-us-address + .heading-accent {
  margin-top: 28px;
}

/* == FEEDBACK SECTION == */
.feedback-section {
  position: relative;
}

.feedback-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.feedback-copy p {
  margin: 0 0 14px;
  line-height: 1.7;
}

.feedback-last {
  margin-top: 6px;
}

.feedback-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}

.copy-email-status {
  font-size: 13px;
  opacity: 0.75;
  min-height: 18px;
}

.feedback-side {
  display: grid;
  gap: 14px;
}

.side--main- {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(51, 51, 51, 0.12);
  border-radius: 14px;
  padding: 18px;
}

.side-divider {
  height: 1px;
  width: 100%;
  margin: 18px 0;
  background: rgba(51, 51, 51, 0.12);
}

.side--main--muted {
  background: rgba(0, 0, 0, 0.03);
}

.side-title {
  font-family: var(--font-handwritten);
  font-size: 24px;
  margin: 0 0 10px;
}

.side-text {
  font-size: 0.875rem;
  margin: 0 0 14px;
  line-height: 1.7;
  opacity: 0.9;
}


/* ======================================================
   MODIFIERS
   ====================================================== */
@media (max-width: 720px) {
  .main-grid > .main-card:nth-child(2) { grid-row: 1; }
  .main-grid > .main-card:nth-child(1) { grid-row: 2; }
  .main-grid > .main-card:nth-child(3) { grid-row: 3; }
}

@media (min-width: 721px) {
  .main-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-content-inner { 
    padding: 48px; 
  }

  .story-block {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .story-block.is-reversed .story-media { order: 2; }
  .story-block.is-reversed .story-content { order: 1; }

  .find-us .find-us-grid {
    grid-template-columns: 730px max-content;
    gap: 20px;
    justify-content: center;
    justify-items: stretch;
    text-align: left;
  }

  .feedback-grid {
    grid-template-columns: 2fr 1fr;
  }
}

@media (prefers-color-scheme: dark) {
  .side-divider {
    background: rgba(255, 255, 255, 0.12);
  }
}