/* SECTION = FULL HEIGHT CONTAINER */
.rice-section {
  position: relative;
  min-height: 100vh;
  display: flex;

  /* background-image: url("https://www.lodigiana.com/wp-content/uploads/2015/12/riso-reperso-varieta-di-riso-unica-al-mondo-agricola-lodigiana-riseria-ronsecco-vercelli.jpg"); */
  background-image: url("assets/img/pexels-alexeydemidov-9671921.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* GRID MUST FILL ENTIRE SECTION HEIGHT */
.rice-grid {
  flex: 1;                      /* fills section */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;         /* 🔥 CRITICAL: forces full height columns */
  min-height: 100vh;
}

/* LEFT SIDE = JUST IMAGE EXPOSURE */
.rice-left {
  height: 100%;
  
}

/* RIGHT PANEL = TRUE FULL HEIGHT COLUMN */
.rice-panel {
  height: 100%;                /* 🔥 forces full stretch */
  background: rgba(0, 0, 0, 0.85);

  display: flex;
  flex-direction: column;
  justify-content: center;     /* keeps content centered inside full-height column */

  padding: 80px 60px;
  text-align: center;
  color: #fff;
}

/* RIGHT PANEL = TRUE FULL HEIGHT COLUMN - MOBILES */
@media (max-width: 768px) {
.rice-panel {
  height: 100%;                /* 🔥 forces full stretch */
  background: rgba(0, 0, 0, 0.85);
  /* background: blue; */

  display: flex;
  /* flex-direction: column; */
  justify-content: center;     /* keeps content centered inside full-height column */

  padding: 80px 60px;
  text-align: center;
  color: #fff;
  margin-left: -128px;
}
}

/* TYPOGRAPHY */
.rice-title {
  font-size: 72px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}
@media (max-width: 1400px){
  .rice-title {
  font-size: 48px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}
}
@media (max-width: 1200px){
  .rice-title {
  font-size: 48px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}
}
@media (max-width: 992px){
  .rice-title {
  font-size: 48px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}
}
@media (max-width: 768px){
  .rice-title {
  font-size: 48px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}
}
@media (max-width: 576px){
  .rice-title {
  /* font-size: 32px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px; */

  font-size: 32px;
  font-weight: 300;
  margin: -1rem;
  letter-spacing: 2px;

  /* text-align: center; */
  /* line-height: 1.2; */
  /* text-wrap: balance; */

  /* width: 100%; */
  /* display: block; */
  
}
}
/* MIRROR */
/* TYPOGRAPHY */
.rice-title_mirror {
  font-size: 72px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}

@media (max-width: 1400px){
  .rice-title_mirror {
  font-size: 48px;
  font-weight: 300;
  margin: 8.72rem;;
  letter-spacing: 2px;
}
}
@media (max-width: 1200px){
  .rice-title_mirror {
  font-size: 48px;
  font-weight: 300;
  margin: 4rem;
  letter-spacing: 2px;
}
}
@media (max-width: 992px){
  .rice-title_mirror {
  font-size: 48px;
  font-weight: 300;
  margin: 2.75rem;
  letter-spacing: 2px;
}
}
@media (max-width: 768px){
  .rice-title_mirror {
  font-size: 48px;
  font-weight: 300;
  margin: -0.67rem;
  letter-spacing: 2px;
}
}
@media (max-width: 576px){
  .rice-title_mirror {
  /* font-size: 32px;
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px; */

  font-size: 32px;
  font-weight: 300;
  margin: -1.33rem;
  letter-spacing: 2px;

  /* text-align: center; */
  /* line-height: 1.2; */
  /* text-wrap: balance; */

  /* width: 100%; */
  /* display: block; */
  
}
}

.rice-subtitle {
  font-size: 18px;
  margin-top: 10px;
  color: #ddd;
}

.rice-motif {
  margin: 20px 0;
  font-size: 20px;
  color: #c59d5f;
}

.rice-text {
  font-size: 18px;
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto 30px;
  color: #eee;
}

ul {

  text-align: left !important;
}

/* BUTTON */
.rice-button {
display: inline-flex;   /* better than inline-block in flex layouts */
  width: fit-content;     /* prevents unwanted stretching */
  padding: 12px 30px;
  border-radius: 50px;
  background: #813439;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease;
  align-self: center; /* keeps it centered like before */
  display: inline-flex;
  width: fit-content;
}
/* BUTTON */
.about-button {
  display: inline-block;
  background: #813439;
  color: #fff;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.rice-button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* **************** */
/* !!! REVERSE !!!  */
/* **************** */

/* reverse grid direction */
.rice-section_mirror .rice-grid {
  direction: rtl; /* _mirror */
}

/* fix text flow inside panel */
.rice-section_mirror .rice-panel_mirror {
  direction: ltr; /* _mirror */
}

/* RIGHT PANEL = TRUE FULL HEIGHT COLUMN */
.rice-panel_mirror {
  height: 100%;                /* 🔥 forces full stretch */
  background: rgba(255, 255, 255, 0.85);

  display: flex;
  flex-direction: column;
  justify-content: center;     /* keeps content centered inside full-height column */

  padding: 80px 60px;
  text-align: center;
  color: #000;
}

/* RIGHT PANEL = TRUE FULL HEIGHT COLUMN - MOBILES */
@media (max-width: 768px) {
.rice-panel_mirror {
  height: 100%;                /* 🔥 forces full stretch */
  background: rgba(255, 255, 255, 0.85);

  display: flex;
  /* flex-direction: column; */
  justify-content: center;     /* keeps content centered inside full-height column */

  padding: 80px 60px;
  text-align: center;
  color: #000;
  margin-left: 0px;
  width: 125%;
}
}

/* RIGHT PANEL = TRUE FULL HEIGHT COLUMN - MOBILES */
@media (max-width: 576px) {
.rice-panel_mirror {
  height: 100%;                /* 🔥 forces full stretch */
  background: rgba(255, 255, 255, 0.85);
  /* background: blue; */

  display: flex;
  /* flex-direction: column; */
  justify-content: center;     /* keeps content centered inside full-height column */

  padding: 80px 60px;
  text-align: center;
  color: #000;
  margin-left: 0px;
  width: 125%;
}
}

/* GRID MUST FILL ENTIRE SECTION HEIGHT */
.rice-grid_mirror {
  flex: 1;                      /* fills section */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;         /* 🔥 CRITICAL: forces full height columns */
  min-height: 100vh;
}
.rice-grid_mirror p{
    color: #000;

}