/* ===========================
   Mobile Hero Section (Polished with Goudos)
   =========================== */
.hero-mobile {
  text-align: center;
  padding: 3rem 1.5rem;         
  border-radius: 8px;
  background-color: var(--light-gray, #f5f5f5);
  position: relative;
  overflow: hidden;
  box-shadow: 10px -14px 48px var(--primary-complement);

}


.hero-mobile-title {
  font-family: 'Goudos', var(--font-serif-primary), serif; /* Goudos first */
  font-size: 4.5rem;               /* bigger heading */
  font-weight: normal;             /* let Goudos weight shine */
  margin: 0 0 1rem;
  color: var(--primary-green);
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.hero-mobile-tagline p {
  font-family: 'Goudos', var(--font-sans-secondary), sans-serif;
  font-size: 2.2rem;               /* larger tagline text */
  font-style: italic;
  margin: 0.5rem 0;
  color: #444;
  line-height: 1.6;
}.hero-mobile-btn a {
  font-family: 'Goudos', var(--font-sans-primary), sans-serif;
  display: inline-block;
  margin-top: 1.5rem;
  padding: 2.1rem 3.25rem;         /* tall, wide button */
  font-size: 2.5rem;
  font-weight: normal;             /* rely on Goudos styling */
  border-radius: 30px;
  text-decoration: none;
  color: white;

  /* Dimensional background using brand greens */
  background: radial-gradient(circle at center,
    var(--primary-green) 0%,          /* lighter green center */
    var(--primary-green) 50%,         /* mid tone */
    var(--primary-green-dark) 100%    /* darker edges */
  );

  /* Beveled shadows */
  box-shadow:
    6px 6px 12px rgba(0,0,0,0.2),        /* outer shadow bottom-right */
    -6px -6px 12px rgba(255,255,255,0.4),/* outer highlight top-left */
    inset 2px 2px 4px rgba(0,0,0,0.2),   /* inner shadow bottom-right */
    inset -2px -2px 4px rgba(255,255,255,0.3); /* inner highlight top-left */

  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}

/* Optional subtle grain overlay */
.hero-mobile-btn a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.15; /* slightly reduced so text stays crisp */
  pointer-events: none;
  border-radius: inherit;
}

/* Mobile press feedback */
.hero-mobile-btn a:active {
  transform: scale(0.96);
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,0.25),
    inset -4px -4px 8px rgba(255,255,255,0.4);
}


/* ===========================
   Hebdomadals Mobile Section
   =========================== */
.hebdomadals-mobile {
  padding: 1.5rem;     /* generous vertical padding */
  text-align: center;
}

.hebdomadals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 grid */
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.hebdomadal-card {
  background: radial-gradient(circle at center,
    rgba(255,255,255,0.6) 0%,   /* bright center highlight */
    rgba(245,245,245,1) 40%,    /* soft mid tone */
    rgba(224,224,224,1) 100%    /* darker edges */
  );
  border-radius: 14px;
  padding: 2rem 1rem;
  min-height: 220px;
  box-shadow:
    6px 6px 12px rgba(0,0,0,0.15),
    -6px -6px 12px rgba(255,255,255,0.7),
    inset 2px 2px 4px rgba(0,0,0,0.1),
    inset -2px -2px 4px rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}

/* Optional subtle grain overlay */
.hebdomadal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.25;
  pointer-events: none;
}

/* Pressed-in feedback */
.hebdomadal-card:active {
  transform: scale(0.97);
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,0.2),
    inset -4px -4px 8px rgba(255,255,255,0.7);
}


.hebdomadal-link {
  text-decoration: none;
  color: var(--primary-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  /* keep icon + text together in center */
  flex: 1;
}

.hebdomadal-icon {
  width: 105px;              /* larger icons */
  height: 117px;
  margin-bottom: 1.25rem;   /* more space before text */
  flex-shrink: 0;
}

.hebdomadal-title {
  font-family: 'Goudos', var(--font-sans-primary), sans-serif;
  font-size: 2.8rem;        /* larger text for visibility */
  font-weight: 700;         /* bolder for emphasis */
  margin: 0;
  line-height: 1.6;
  text-align: center;
}
/* ===========================
   Connect Mobile Section
   =========================== */
.connect-mobile-wrapper {
  padding: 1rem;
  text-align: center;
  background-color: white;
  border-radius: 8px;
}

.connect-heading {
  font-family: 'Goudos', var(--font-sans-primary), sans-serif;
  font-size: 4.8rem;
  font-weight: 700;
  margin-bottom: 4rem;
  color: var(--primary-green);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.connect-heading .heading-icon {
  width: 133px;
  height: 117px;
  flex-shrink: 0;
}

/* Grid layouts */
.connect-grid {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 2.5rem auto;
}

.connect-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

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

/* Card style — same spotlight neutral look as hebdomadals */
.connect-card {
  background: radial-gradient(circle at center, rgba(255,255,255,0.6) 0%, rgba(245,245,245,1) 40%, rgba(224,224,224,1) 100% );
  border-radius: 14px;
  padding: 2rem 1rem;
  min-height: 180px;
  box-shadow:
    6px 6px 12px rgba(0,0,0,0.15),
    -6px -6px 12px rgba(255,255,255,0.7),
    inset 2px 2px 4px rgba(0,0,0,0.1),
    inset -2px -2px 4px rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--primary-green);
}

/* Subtle grain overlay */
.connect-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 2px,
    transparent 2px,
    transparent 4px
  );
  opacity: 0.25;
  pointer-events: none;
}

/* Press feedback */
.connect-card:active {
  transform: scale(0.97);
  box-shadow:
    inset 4px 4px 8px rgba(0,0,0,0.2),
    inset -4px -4px 8px rgba(255,255,255,0.7);
}

/* Icon styling */
.connect-card .card-icon {
  margin-bottom: 1.25rem;
}

.connect-card img,
.connect-card .social-icon {
  width: 117px;
  height: 103px;
  flex-shrink: 0;
}

/* Text styling */
.connect-card .card-title {
  font-family: 'Goudos', var(--font-sans-primary), sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0.2rem;
  color: var(--primary-dark-complement);
  box-shadow: 1px 1px 1px white;
}

.connect-card .card-description {
  font-size: 2rem;
  line-height: 1.4;
  margin: 0.5rem 0 0 0;
  text-align: center;
  opacity: 1;
  font-family: var(--font-serif-primary);
}
/* ===========================
   Mobile Gathering Times Section
   =========================== */
.mobile-gathering-times {
  padding: 4rem 2rem; /* more generous padding */
  text-align: center;
  background-color: var(--light-gray, #f5f5f5);
  border-radius: 12px;
}

.gathering-heading {
  font-family: 'Goudos', var(--font-sans-primary), sans-serif;
  font-size: 2.5rem;   /* larger heading */
  font-weight: 700;
  margin-bottom: 2.5rem;
  color: var(--primary-green);
}

/* Schedule table */
.gathering-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2.5rem;
}

.gathering-table th,
.gathering-table td {
  padding: 1.5rem;     /* more padding for touch readability */
  text-align: center;
  font-size: 1.8rem;  /* larger text */
}

.gathering-table tr:nth-child(even) {
  background-color: rgba(245,245,245,0.95);
}

.gathering-table tr:nth-child(odd) {
  background-color: rgba(224,224,224,0.6);
}

.gathering-day {
  font-weight: 700;
  color: var(--primary-green);
  font-size: 1.35rem;
}

.gathering-name {
  font-weight: 400;
  font-size: 1.25rem;
}

.gathering-time {
  font-style: italic;
  opacity: 0.9;
  font-size: 1.2rem;
}

/* Button grid (1x2 pattern) */
.gathering-button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

/* Tactile button style (scaled up) */
.gathering-button {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  gap: 0.2rem;
  padding: 2.5rem 3.5rem; /* larger tap target */
  border-radius: 16px;
  font-size: 2.25rem;       /* larger text */
  font-weight: 800;
  text-decoration: none;
  color: var(--primary-green);
  background: radial-gradient(circle at center,
    rgba(255,255,255,0.6) 0%,
    rgba(245,245,245,1) 40%,
    rgba(224,224,224,1) 100%);
  box-shadow:
    8px 8px 16px rgba(0,0,0,0.15),
    -8px -8px 16px rgba(255,255,255,0.7),
    inset 3px 3px 6px rgba(0,0,0,0.1),
    inset -3px -3px 6px rgba(255,255,255,0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
  font-family: var(--font-serif-primary);
}

.gathering-button:active {
  transform: scale(0.96);
  box-shadow:
    inset 5px 5px 10px rgba(0,0,0,0.25),
    inset -5px -5px 10px rgba(255,255,255,0.7);
}

.gathering-button .button-icon {
  width: 102px;   /* larger icon */
  height: 105px;
}